我需要完成的效果：

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. MapReduce程序（一）——wordCount

    写在前面:WordCount的功能是统计输入文件中每个单词出现的次数.基本解决思路就是将文本内容切分成单词,将其中相同的单词聚集在一起,统计其数量作为该单词的出现次数输出. 1.MapReduce之w ...

  2. python 日期输出附带毫秒

    def get_time_stamp(ct): local_time = time.localtime(ct) data_head = time.strftime( time_stamp = &quo ...

  3. Python day15装饰器基本理论，以及结合全局变量模拟session

    装饰器(decorator):为其他函数添加附加功能 原则:1.不修改被修饰函数源代码 2.不修改被修饰函数的调用方式 装饰器=高阶函数+函数嵌套+闭包 import time def timmer( ...

  4. iconv编码转换

    环境:cocos2dx 3.10 1.vs环境下编译windows版本,需要增加头文件和链接库①cocos2d-x-3.10\external\win32-specific\icon\include② ...

  5. 899F - Letters Removing

    Codeforces 899F - Letters Removing 思路:考虑一下怎么找到输入的l和r在原来串中的位置,我们想到用前缀和来找,一开始所有位置都为1,删掉后为0,那么前缀和为l的位置就 ...

  6. AtomicLong与LongAdder的区别

    AtomicLong的原理 AtomicLong是通过依靠底层的CAS来保障原子性的更新数据,在要添加或者减少的时候,会使用死循环不断地cas到特定的值,从而达到更新数据的目的. LongAdder的 ...

  7. ArcGis For Silverlight API,地图显示Gis,绘制点，线，绘制图等--绘制点、线、圆，显示提示信息

    ArcGis For Silverlight API,地图显示Gis,绘制点,线,绘制图等--绘制点.线.圆,显示提示信息 /// <summary> /// 绘制界面上的点和线 ///  ...

  8. 实训10a--用数据值填充下拉列表

    1.新建mvc4项目,选择基本模板. (1)点击“开始->所有程序->Microsoft Visual Studio 2012->Visual Studio 2012”菜单,打开Vi ...

  9. 20170324xlVBA最简单分类计数

    Sub NextSeven_CodeFrame() Application.ScreenUpdating = False Application.DisplayAlerts = False Appli ...

  10. Jersey 2.x 探索新建的工程

    如果用 Jersey maven archetype 成功创建了这个项目,那么在你当前的路径下就已经创建了一个名为simple-service项目.它包含了一个标准的Maven项目结构: 说明 文件目 ...