首页 > 代码库 > bootstrap模态框远程加载网页的正确处理方式
bootstrap模态框远程加载网页的正确处理方式
bootstrap模态框远程加载网页的方法
在bootsrap模态框文档里给出了这个方法：
使用链接模式
<a data-toggle="modal" href="http://www.mamicode.com/tieniu.php" data-target="#modal">Click me</a>
使用脚本模式：
$("#modal").modal({ remote: "tieniu.php"});
没有给出任何实例，这种用法还有一些细节没有说明。你如果仅仅这样复制使用，那是没有效果的。
很多朋友都在网上问题这个问题，大多数人都在复制粘贴，自己都没有验证，就乱回复，唉！
下面是正确的模态框远程加载方法的代码
客户端代码
<a data-toggle="modal" href="http://www.mamicode.com/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">×</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模态框远程加载网页的正确处理方式
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。