未加星标

在iframe中使bootstrap的模态框在父页面弹出问题

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

这几天在写项目的中,页面使用了iframe,然而在子页面中使用bootstrap的模态框时发现:弹出的模态框位置是以子页面为标准居中的,并且遮罩层也只有子页面那一部分,整个页面简直无法直视,所以思考可以可以让模态框以父页面为标准弹出,经过在网上查找资料,总结了一种解决方法。

效果展示

修改前页面

在iframe中使bootstrap的模态框在父页面弹出问题

修改后页面

在iframe中使bootstrap的模态框在父页面弹出问题

实现思路

要想使模态框在顶级页面打开,我想到的方法是使bootstrap的模态框弹在父页面弹出即可。
首先我们将需要弹出的div单独写一个页面,当子页面需要弹出时,在父页面弹出div即可。

将模态框单独写为一个页面

主页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="modal fade" id="ajax" role="basic" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
</body>
<script>
$("#ajax").modal({
remote: "./model.html"
});
</script>
</html>

模态框页面

<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
这是模态框
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">保存</button>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>

这样就可以将模态框的div单独写为一个页面

修改主页面,加入子页面

修改后主页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table width="100%" height="720px" border="1">
<tr>
<td>
<iframe id="iframe1" name="iframe1" src="iframe1.html" width="100%" height="100%"></iframe>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<iframe name="iframe2" src="iframe2.html" width="100%" height="100%"></iframe>
</td>
</tr>
</table>
<input type="text" id="textId" value="234" />
<div class="modal fade" id="ajax" role="basic" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
</body>
<script>
function modalOut(url) {
$("#ajax").modal({
remote: url;
});
}
</script>
</html>

这样主页面就有2个子页面,并且将弹出模态框的方法封装至modalOut(url)方法中

子页面弹出模态框

当子页面需要弹出模态框时,加载父页面中的modalOut(url)方法即可:

子页面js如下

var _iframe = window.parent;
_iframe.modalOut('xxx.html');

以上就是解决子页面中弹出模态框无法覆盖全部页面的解决办法,

注意:所以html中未加载js,请自行加载bootstrap相关的js。

总结

以上所述是小编给大家介绍的在iframe中使bootstrap的模态框在父页面弹出问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 谢大
分页:12
转载请注明
本文标题:在iframe中使bootstrap的模态框在父页面弹出问题
本站链接:http://www.codesec.net/view/561157.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(60)