这几天在写项目的中,页面使用了iframe,然而在子页面中使用引导的模态框时发现:弹出的模态框位置是以子页面为标准居中的,并且遮罩层也只有子页面那一部分,整个页面简直无法直视,所以思考可以可以让模态框以父页面为标准弹出,经过在网上查找资料,总结了一种解决方法。
修改前页面
修改后页面
要想使模态框在顶级页面打开,我想到的方法是使引导的模态框弹在父页面弹出即可。
首先我们将需要弹出的div单独写一个页面,当子页面需要弹出时,在父页面弹出div即可。
主页面
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=" utf - 8 "/比;
& lt; title> & lt;/title>
& lt;/head>
& lt; body>
& lt; div类="模态消失" id=癮jax”角色=盎尽盿ria-hidden=" true "比;
& lt; div类=澳Ｌ曰翱颉北?
祝辞& lt; div class="模式内容”;
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/body>
& lt; script>
$ (" # ajax”) .modal ({
远程:“。/model.html”
});
& lt;/script>
& lt;/html>
模态框页面
祝辞& lt; div class="模式内容”;
& lt; div类=癿odal-header”比;
& lt;按钮类型=鞍磁ァ眂lass=肮乇铡眃ata-dismiss=澳Ｌ盿ria-label=肮乇铡弊４? lt;跨度aria-hidden=" true "祝辞,次;& lt;/span> & lt;/button>
& lt; h5类=" modal-title " id=癿yModalLabel”在模态title
& lt;/div>
& lt; div类=癿odal-body”比;
这是模态框
& lt;/div>
& lt; div类=癿odal-footer”比;
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-primary”在保存& lt;/button>
& lt;按钮类型=鞍磁ァ崩?癰tn btn-default data-dismiss”=澳Ｌ钡脑诠乇? lt;/button>
& lt;/div>
& lt;/div>
这样就可以将模态框的div单独写为一个页面
修改后主页面
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=" utf - 8 "/比;
& lt; title> & lt;/title>
& lt;/head>
& lt; body>
& lt;表宽度=?00%”高度==?”比“720 px”边界;
& lt; tr>
& lt; td>
& lt; iframe id=" iframe1 " name=" iframe1 " src=" https://www.yisu.com/zixun/iframe1.html "宽度=?00%”的身高=?00%”祝辞& lt;/iframe>
& lt;/td>
& lt; td> & lt;/td>
& lt;/tr>
& lt; tr>
& lt; td> & lt;/td>
& lt; td>
& lt; iframe的名字=" iframe2 " src=" https://www.yisu.com/zixun/iframe2.html "宽度==?00%”“100%”高度祝辞& lt;/iframe>
& lt;/td>
& lt;/tr>
& lt;/table>
& lt;输入类型="文本" id=" textId " value=" https://www.yisu.com/zixun/234 "/比;
& lt; div类="模态消失" id=癮jax”角色=盎尽盿ria-hidden=" true "比;
& lt; div类=澳Ｌ曰翱颉北?
祝辞& lt; div class="模式内容”;
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/body>
& lt; script>
函数modalOut (url) {
$ (" # ajax”) .modal ({
远程:url;
});
}
& lt;/script>
& lt;/html>
这样主页面就有2个子页面,并且将弹出模态框的方法封装至modalOut (url)方法中
当子页面需要弹出模态框时,加载父页面中的modalOut (url)方法即可:
子页面js如下
var _iframe=window.parent;
_iframe.modalOut (xxx.html);
以上就是解决子页面中弹出模态框无法覆盖全部页面的解决办法,
注意:所以html中未加载js,请自行加载引导相关的js。
以上所述是小编给大家介绍的在iframe中使引导的模态框在父页面弹出问题,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
