bootstrap3-iframe-modal子页面在父页面显示模态框

本文灵感来自:http://www.cnblogs.com/chengxuyuanzhilu/p/5132328.html

子页面内容

    //打开模态框
function openMySelectModiaOrPackageModal(){
var fatherBody = $(window.top.document.body);
//定义页面存放模态窗口的元素
var id = 'iframeModalPages';
var dialog = $('#' + id);
if (dialog.length == 0) {
dialog = $('<div class="modal fade" role="dialog" id="' + id + '">'+$('#mySelectMediaOrPackageModal').html()+'</div>');
dialog.appendTo(fatherBody);
}
//加载
dialog.load("model.html", function() {
dialog.modal({
backdrop: false
});
});
}

子页面modal

<div class="modal fade bs-example-modal-lg" tabindex="-1" id="mySelectMediaOrPackageModal" role="dialog" aria-labelledby="mySelectMediaOrPackageModal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<ul class="nav nav-tabs _yh_modal_content_title">
<li class="active">
<a href="#mySelectMedia" data-toggle="tab">
<h4 class="modal-title" id="mySelectMediaPanel">
选择1
</h4>
</a>
</li>
<li>
<a href="#mySelectPackage" data-toggle="tab">
<h4 class="modal-title" id="mySelectPackagePanel">
选择2
</h4>
</a>
</li>
</ul>
</div>
<div class="modal-body">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="mySelectMedia">
<p>菜鸟教程是一个提供最新的web技术站点,本站免费提供了建站相关的技术文档,帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术,更是梦想。</p>
</div>
<div class="tab-pane fade" id="mySelectPackage">
<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
TV。iOS 派生自 OS X,它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上,iOS 是苹果的移动版本。</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
关闭
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div>
</div>
</div>

绑定子页面触发按钮

 $("#_cx_modiaOrPackageS").click(function(){
openMySelectModiaOrPackageModal();
});
上一篇:获取iframe子页面内容高度给iframe动态设置高度


下一篇:提升webpack打包速度