自己封装的Thinkphp+Bootstrap 模态iframe其他页面

最新推荐文章于 2022-12-25 09:11:53 发布

原创最新推荐文章于 2022-12-25 09:11:53 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #thinkphp #模态

PHP 同时被 2 个专栏收录

50 篇文章

订阅专栏

Bootstrap

3 篇文章

订阅专栏

本文介绍了如何使用Bootstrap的模态框，并结合Thinkphp进行封装，避免复杂的JavaScript编写。通过在父页面定义模态框HTML和JS方法，子页面提交后调用父页面方法关闭模态，实现页面间的交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap的模态框效果不错，写js太麻烦了，忍了很久，还是自己封装一下吧。

1、首先把父页面的模态框的html稍微改一下：

<div class="modal fade" role="dialog" id="JuShiModal">
  <div class="modal-dialog" role="document">//通过这里设置模态框的大小
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title"></h4>//这里是标题，留空
      </div>
      <div class="modal-body">
        <p >
        	<iframe frameborder="0" id="childFrm" width="100%" height="500" style = "overflow-x:hidden;overflow-y:scroll;"></iframe>//这是是亮点
        </p>
      </div>
    </div>
  </div>
</div>

并在父页面添加如下js：

function dosuccess(){
	$("#JuShiModal").modal('hide');
}

此方法是给子页面调用的，操作成功后关闭模态。

2、父页面定义个js方法：

function openDg(src,height,title){
//传了3个参数，请求的网址、模态的高度、标题
	$("#childFrm").attr("src",src);
	$("#childFrm").attr("height",height);
	$(".modal-title").html(title);
	$("#JuShiModal").modal('show');
}

3、事件触发：

<a href="#" onclick="openDg('Admin/Branch/a','200','添加部门')">添加部门</a>

说明：a 控制器其实就是现实页面，

4、子页面提交：

子页面的提交事件自己整吧，成功后执行

$this->do_success();

function do_success(){
	$this->display(":Branch/succ");//succ.html就是成功页面
}

这个方法是跳转到成功页面，html如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="__ROOT__/public/js/jquery-1.7.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		$(function(){
			setTimeout(function(){
				window.parent.dosuccess();
			},1000);
		});
		</script>
	</head>
	<body>
		保存成功！
	</body>
	
</html>

记得加载jq，此段代码的意思就是延迟1秒后，触发父页面的方法，来关闭模态，

至于成功页面的静态部分，自己整吧。

为了证明是iframe加载的页面，我把debug开启了，效果如下：