bootstrap在iframe框架中实现由子页面在顶级页面打开模态框（modal）

我需要完成的效果：

1.在顶级页面打开模态框，并且遮罩层也要再顶级页面

2.单击遮罩层部分，模态框不关闭

问题描述：

不知为什么，可能是bootstrap前端框架添加遮罩层的一些问题。通过子页面在顶级页面打开模态框（modal），遮罩层竟然只在子页面显示。

如下效果：

1.主页面代码：

<!DOCTYPE html>
<html><head><metacharset="utf-8" /><title></title><linkrel="stylesheet"href="css/bootstrap.css" /></head><body><tablewidth="100%"height="720px"border="1" ><tr><td><iframeid="iframe1"name="iframe1"src="iframe1.html"width="100%"height="100%"></iframe></td><td></td></tr><tr><td></td><td><iframename="iframe2"src="iframe2.html"width="100%"height="100%"></iframe></td></tr></table><inputtype="text"id="textId"value="234" /><scripttype="text/javascript"src="js/jquery.js" ></script><scripttype="text/javascript"src="js/bootstrap.js" ></script></body>
</html>

2.子页面代码：

<!DOCTYPE html>
<html><head><metacharset="UTF-8"><title></title><linkrel="stylesheet"href="css/bootstrap.css" /></head><body><div><fontcolor="#000000"size="4">听一场摇滚，和耳朵一起一醉方休；<br/>喝一圈烈酒，让酒腻子们闻风丧胆；<br/>开一场cosplay party，二次元万岁；<br/>摸一下大蜥蜴，我熊胆威风凌厉；<br/>吃三斤驴打滚，翻滚吧肠胃；<br/>飚一把摩托车，成为风驰电掣的女王；<br/>见一下微博红人，感受马伯庸亲王的慈祥；</font></div><scripttype="text/javascript"src="js/jquery.js" ></script><scripttype="text/javascript"src="js/bootstrap.js" ></script><scripttype="text/javascript">$(document).ready(function() {openModal();});//打开模态框functionopenModal(){varfatherBody=$(window.top.document.body);varid= 'pages';vardialog=$('#' +id);if(dialog.length== 0) {dialog=$('<div class="modal fade" role="dialog" id="' +id+ '"/>');dialog.appendTo(fatherBody);}dialog.load("model.html",function() {dialog.modal();});}</script></body>
</html>

注：window.top获取顶级页面的window对象

问题在于遮罩层，渲染完后查看遮罩层代码如下："<div id='backdropId' class='modal-backdrop fade in'></div>"

1.子页面修改代码如下：

<!DOCTYPE html>
<html><head><metacharset="UTF-8"><title></title><linkrel="stylesheet"href="css/bootstrap.css" /></head><body><div><fontcolor="#000000"size="4">听一场摇滚，和耳朵一起一醉方休；<br/>喝一圈烈酒，让酒腻子们闻风丧胆；<br/>开一场cosplay party，二次元万岁；<br/>摸一下大蜥蜴，我熊胆威风凌厉；<br/>吃三斤驴打滚，翻滚吧肠胃；<br/>飚一把摩托车，成为风驰电掣的女王；<br/>见一下微博红人，感受马伯庸亲王的慈祥；</font></div><scripttype="text/javascript"src="js/jquery.js" ></script><scripttype="text/javascript"src="js/bootstrap.js" ></script><scripttype="text/javascript">$(document).ready(function() {openModal();closeModal();});//打开模态框functionopenModal(){varfatherBody=$(window.top.document.body);varid= 'pages';vardialog=$('#' +id);if(dialog.length== 0) {dialog=$('<div class="modal fade" role="dialog" id="' +id+ '"/>');dialog.appendTo(fatherBody);}dialog.load("model.html",function() {dialog.modal({backdrop:false});});fatherBody.append("<div id='backdropId' class='modal-backdrop fade in'></div>");}//关闭模态框functioncloseModal(){varfatherBody=$(window.top.document.body);fatherBody.find("#pages").on('hidden.bs.modal',function(e) {fatherBody.find("#backdropId").remove();});}</script></body>
</html>

主要方面：
1.openModal()，closeModal()两个方法，在子页面绑定的关系顶级页面模态框的打开和关闭方法。openModal方法在顶级页面添加的遮罩层的html代码，而closeModal给顶级页面的模态框对象绑定了'hidden.bs.modal'事件，在该事件中移除的遮罩层

的html代码。

2. dialog.load("model.html", function() {
                    dialog.modal({
                      backdrop: false});
                });中的backdrop:false实现了再遮罩层点击不再关闭模态框的功能！

修改后的效果：

个人试过其他的很多方式，最终这是最简单最方便的！如果有人想去看bootstrap的代码去修改，个人十分佩服，但由于个人工作问题只能浅尝辄止。

项目源码下载地址：http://pan.baidu.com/s/1qWTm4e4

参考网站地址：http://bootstrap.evget.com/javascript.html#modals

转载于:https://www.cnblogs.com/chengxuyuanzhilu/p/5132328.html

bootstrap在iframe框架中实现由子页面在顶级页面打开模态框（modal）相关推荐

在iframe框架中全屏不好使的原因
遇到的问题:我是在iframe框架中添加了一个插件在360和火狐中不好使,将allowfullscreen="true" 属性配置好就没问题了: 可能出现的原因:将allowful ...
python测试开发django-122.bootstrap模态框(modal)学习
前言模态框(Modal)是覆盖在父窗体上的子窗体,使用场景比如:在页面上编辑内容的时候经常需要弹出一个框框,可以编辑字段提交. 点删除按钮的时候,需要弹出二次确认框,这种现页面上的框框就是模态框模 ...
纯html点击按钮弹出表单,Bootstrap使用模态框modal实现表单提交弹出框
Bootstrap 模态框(Modal)插件模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如 ...
bootstrap 模态框无法使用_22 模态框Modal教程（plotly Dash Bootstrap版）
今天第22课,本节课程主要学习Dash Bootstrap Components中的模态框Modal,类似页面中常见的对话框,在python web网页设计中较为常用.欣赏一首很甜蜜安静的钢琴曲< ...
地图选点 php,百度地图选点–Bootstrap模态框(Modal)插件
在网站的开发过程中,例如商家的注册等,需要商家设定自己的经纬度进行对商家的精确定位,同时也方便用户查找到附近距离范围内的商家.这样更利于网站的用户和商家互动.商家设定自己的经纬度就需要使用到百度地图2 ...
Bootstrap模态框(modal)显示、隐藏与禁用ESC代码实现
场景对于弹出框bootstrap就有模态框(modal). 有时显示模态框,按键盘上ESC就会关闭模态框,所以在打开模态框时设置其属性. 实现 modal显示: $("#apAddAndE ...
html怎样同框架页面内跳转,使用iframe框架时，实现子页面内跳转到整个页面，而不是在子页面内跳转...
首先先来描述一下我所遇到的问题,我在一个首页的index.jsp页面中用到了iframe框架,见下图在iframe中引入jsp页面的路径,是几个iframe框架组合成的一个完整的页面,但是他们的存在 ...
黄聪：bootstrap中模态框modal在苹果手机上会失效
bootstrap中模态框在苹果手机上会失效可将代码修改为<a data-toggle="modal" data-target="#wrap" hre ...
bootstrap 模态窗口按钮位置_Bootstrap模态框(modal)垂直居中
今天就在使用Bootstrap框架中遇到的一个问题分享一下,在产品开发的过程中使用了大量的弹出窗口(modal). 刚开始学习使用的过程中就发现此窗口不能垂直居中,总是偏上,并且不能拖动,看了一下使用 ...

bootstrap在iframe框架中实现由子页面在顶级页面打开模态框（modal）

bootstrap在iframe框架中实现由子页面在顶级页面打开模态框（modal）相关推荐

最新文章

热门文章