码迷,mamicode.com
首页 > Web开发 > 详细

bootstrap模态框远程加载网页的正确处理方式

时间:2017-08-12 20:31:49      阅读:255      评论:0      收藏:0      [点我收藏+]

标签:bsp   content   ogg   smis   tle   change   文档   方式   页面   

bootstrap模态框远程加载网页的方法

在bootsrap模态框文档里给出了这个方法:

使用链接模式

<a data-toggle="modal" href="tieniu.php" data-target="#modal">Click me</a>

使用脚本模式:

$("#modal").modal({
    remote: "tieniu.php"
});

 

没有给出任何实例,这种用法还有一些细节没有说明。你如果仅仅这样复制使用,那是没有效果的。

很多朋友都在网上问题这个问题,大多数人都在复制粘贴,自己都没有验证,就乱回复,唉!

下面是正确的模态框远程加载方法的代码

客户端代码

<a data-toggle="modal" href="tieniu.php" data-target="#modal">Click me</a>
<div class="modal" id="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                  <!--这里是远程加载过过来的内容区-->  
         </div>
        </div>
 </div>
    

服务端代码,服务端的代码需要包含一部分模态框的框体文本,请注意

<?php $rnd=rand(1000,9999);?>
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
     <h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
    <?php echo $rnd;?>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
</div>

关闭模态框,再次调用远程页面,但是内容不刷新

以下是解决方式

 $(document).ready(function () {
     $("#modal").on("hidden.bs.modal", function() {
     $(this).removeData("bs.modal");
 });
})

 

bootstrap模态框远程加载网页的正确处理方式

标签:bsp   content   ogg   smis   tle   change   文档   方式   页面   

原文地址:http://www.cnblogs.com/keleyu/p/7351224.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!