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

2021-08-23 02:12:01

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");

 });

})

码农公寓

相关文章