我需要完成的效果：

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. requirejs概念

  2. 【TCP/IP详解 卷一：协议】第十八章 TCP连接 的建立与终止 (2)其余内容

    18.5 TCP的半关闭 牢记 TCP 是 全双工 的. 半关闭:TCP提供了连接的一端 在结束了它的发送后 还能接收来自另外一端数据的能力.但是只有很少的应用程序利用它. 为了实现这个特性,编程接口 ...

  3. 回顾：C++开篇课堂

    周三,在刚刚结束矩阵分析的考试之后,面向对象程序设计课正式开始了C++的学习,这次课的重点即是面向对象思想的理解. 梳理一下知识点. C++中函数的默认参数 在函数声明或者在函数定义时,对参数赋初始值 ...

  4. HDU 2874 Connections between cities（LCA离线算法实现）

    http://acm.hdu.edu.cn/showproblem.php?pid=2874 题意: 求两个城市之间的距离. 思路: LCA题,注意原图可能不连通. 如果不了解离线算法的话,可以看我之 ...

  5. 为什么我的电脑win系统没有便笺功能？为什么我在开始菜单里找不到便笺功能？

    有些网友表示,为什么我的电脑没有便笺功能?为什么我在开始菜单里找不到便笺功能? 从问题可以基本判断出来,这些网友使用的Win7版本有可能是买笔记本或者台式电脑时预装的Win7家庭普通版或者Win7精简 ...

  6. ubuntu16.04 server(amd 64) 下载

    http://mirrors.aliyun.com/ubuntu-releases/16.04/ http://old-releases.ubuntu.com/releases/16.04.3/

  7. django不返回QuerySets的API

    以下的方法不会返回QuerySets,但是作用非常强大,尤其是粗体显示的方法,需要背下来. 方法名 解释 get() 获取单个对象 create() 创建对象,无需save() get_or_crea ...

  8. Qt5.3.2(VS2010)_调试_查看变量值

    1.菜单栏 -->控件(W) --> 视图 2.在"Debug"状态下,选择一个变量(或者 按住左键 选择变量及其属性/方法)--> 右键 --> 添加表达 ...

  9. shuoj 418 丢史蒂芬妮（素数筛+sg函数）

    丢史蒂芬妮 代码: #include<bits/stdc++.h> using namespace std; +; int SG[N][N]; bool S[N]; vector<i ...

  10. Codeforces 38B - Chess

    38B - Chess 思路:懂点象棋的规则就可以,看看哪些点可以放马. 代码: #include<bits/stdc++.h> using namespace std; #define ...