我需要完成的效果：

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

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

问题描述：

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

如下效果：

1.主页面代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link rel="stylesheet" href="css/bootstrap.css" />

    </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" />

        <script type="text/javascript" src="js/jquery.js" ></script>

        <script type="text/javascript" src="js/bootstrap.js" ></script>

    </body>

</html>

2.子页面代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" href="css/bootstrap.css" />

    </head>

    <body>

        <div >

            <font color="#000000" size="4">

                听一场摇滚，和耳朵一起一醉方休；<br />

                喝一圈烈酒，让酒腻子们闻风丧胆；<br />

                开一场cosplay party，二次元万岁；<br />

                摸一下大蜥蜴，我熊胆威风凌厉；<br />

                吃三斤驴打滚，翻滚吧肠胃；<br />

                飚一把摩托车，成为风驰电掣的女王；<br />

                见一下微博红人，感受马伯庸亲王的慈祥；

            </font>

        </div>

        <script type="text/javascript" src="js/jquery.js" ></script>

        <script type="text/javascript" src="js/bootstrap.js" ></script>

        <script type="text/javascript">

            $(document).ready(function() {

                openModal();

            });

            //打开模态框

            function openModal(){

                var fatherBody = $(window.top.document.body);

                var id = 'pages';

                var dialog = $('#' + 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>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" href="css/bootstrap.css" />

    </head>

    <body>

        <div >

            <font color="#000000" size="4">

                听一场摇滚，和耳朵一起一醉方休；<br />

                喝一圈烈酒，让酒腻子们闻风丧胆；<br />

                开一场cosplay party，二次元万岁；<br />

                摸一下大蜥蜴，我熊胆威风凌厉；<br />

                吃三斤驴打滚，翻滚吧肠胃；<br />

                飚一把摩托车，成为风驰电掣的女王；<br />

                见一下微博红人，感受马伯庸亲王的慈祥；

            </font>

        </div>

        <script type="text/javascript" src="js/jquery.js" ></script>

        <script type="text/javascript" src="js/bootstrap.js" ></script>

        <script type="text/javascript">

            $(document).ready(function() {

                openModal();

                closeModal();

            });

            //打开模态框

            function openModal(){

                var fatherBody = $(window.top.document.body);

                var id = 'pages';

                var dialog = $('#' + 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>");

            }

            //关闭模态框

            function closeModal(){

                var fatherBody = $(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

bootstrap在iframe框架中实现由子页面在顶级页面打开模态框（modal）的更多相关文章

  1. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...

  2. javascript_获取iframe框架中元素节点的属性值

    1. DOM:文档对象模型 [window 对象] 它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口. [document 对象] 该对象是window和frames对象的一个属性,是显示于窗口 ...

  3. 在iframe框架中全屏不好使的原因

    遇到的问题:我是在iframe框架中添加了一个插件在360和火狐中不好使,将allowfullscreen="true" 属性配置好就没问题了: 可能出现的原因:将allowful ...

  4. bootstrap模态框modal使用remote第二次加载显示相同内容解决办法

    bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...

  5. Bootstrap历练实例：模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...

  6. Bootstrap(v3.2.0)模态框(modal)垂直居中

    Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...

  7. 使用iframe框架时，实现子页面内跳转到整个页面，而不是在子页面内跳转

    首先先来描述一下我所遇到的问题,我在一个首页的index.jsp页面中用到了iframe框架,见下图 在iframe中引入jsp页面的路径,是几个iframe框架组合成的一个完整的页面,但是他们的存在 ...

  8. 黄聪：bootstrap中模态框modal在苹果手机上会失效

    bootstrap中模态框在苹果手机上会失效 可将代码修改为<a  data-toggle="modal" data-target="#wrap" hre ...

  9. Bootstrap使用模态框modal实现表单提交弹出框

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...

随机推荐

  1. 切换tab页时，tab页中的echart变形问题

    本文为博主原创,未经允许,不得转载: 在两个tab页中,分别展现了两个echart图表,同样的格式与写法,但只有在默认选中的tab页中的图表显示的是正常的, 但进入另一个tab页中时,图表则产生了变形 ...

  2. 实现简单的ORM

    介绍 本篇将介绍实现简单的ORM,即:对数据表的通用操作:增.删.改.查 数据访问层 数据访问层类图 类说明: 1.DbProvider(供应):为数据操作提供基本对象,如:连接.操作对象.事务... ...

  3. 2：JavaScript中的基本运算

    今天说的是JavaScript中的数据基本运算 在上一节中已经说了关于JavaScript中的基本数据类型 那么数据有了 剩下来就是数据之间的运算 表达式-------预算符(赋值 比较 算数 逻辑 ...

  4. Cocos2d-x学习笔记（一）环境搭建与项目创建

    可运行的代码可以说明一切问题. 环境需安装VS201x + Python2.7 + Cocos2d-x-2.2.5.(Linux下参考链接:http://www.cocos2d-x.org/wiki/ ...

  5. unable to find resource 'xxx\xx\overview.vm' in any resource loader.

    ResourceManager : unable to find resource 'C:\Test\TestConfig\overview.vm' in any resource loader.or ...

  6. 如何优化myeclipse.

    1.去除不需要加载的模块 一个系统20%的功能往往能够满足80%的需求,MyEclipse也不例外,我们在大多数时候只需要20%的系统功能,所以可以将一些不使用的 模块禁止 加载启动.通过Window ...

  7. Codeforces 913D - Too Easy Problems

    913D - Too Easy Problems 思路:二分check k 代码: #include<bits/stdc++.h> using namespace std; #define ...

  8. Codeforces 595C - Warrior and Archer

    595C - Warrior and Archer 思路:设最后答案的区间为[l,r],那么r-l等于n/2,因为在(l,r)中的点都是其中一个人挖掉的,[0,l)和(r,n]中的点是另一个人挖掉的, ...

  9. HTML表单组件

    HTML表单组件 一.说明 form标签里面的东西 二.效果图 三.代码 <!DOCTYPE html> <html> <head> <title>Fo ...

  10. ISO 8859-1 对照表 （扩展ASCII码表）

    1. 0---127 是ASCII码 2.128--255 加了一些特殊符号 DEC OCT HEX BIN Symbol HTML Number HTML Name Description 128 ...