我需要完成的效果：

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. hdoj上的一题和程序设计第二次作业的拓展-人见人爱a+b

    hdoj上一道有意思的题目,题目: 人见人爱a+b 敲的也蛮快的,大概十分钟左右就AC了.代码如下: 人见人爱a+b #include<stdio.h> int main() { int ...

  2. 2018/7/18Bad English

    1 So instead of enjoying anime because it can portray interesting stories in a form that would be im ...

  3. 51nod 1076 2条不相交的路径（边双连通分量）

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1076 题意: 思路: 边双连通分量,跑一遍存储一下即可. #includ ...

  4. UVa 10570 外星人聚会

    https://vjudge.net/problem/UVA-10570 题意:输入1~n的排列,每次可以交换两个整数,求出最少交换次数使之变成有序的环状序列. 思路:主要的解题方法就是寻找置换环,举 ...

  5. NOI 4977 怪盗基德的滑翔翼（LIS）

    http://noi.openjudge.cn/ch0206/4977/ 描述: 怪盗基德是一个充满传奇色彩的怪盗,专门以珠宝为目标的超级盗窃犯.而他最为突出的地方,就是他每次都能逃脱中村警部的重重围 ...

  6. 《剑指offer》第三十一题（栈的压入、弹出序列）

    // 面试题31:栈的压入.弹出序列 // 题目:输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是 // 否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1.2.3.4. / ...

  7. ubuntu下xx-net可用IP为0, ping6显示 Network is unreachable

    不知和xx-net有没有关系. 全新安装系统 sudo apt-get install miredo 这时, ping6 ipv6.google.com 是能ping通的 按github上依次安装py ...

  8. Codeforces C - String Reconstruction

    C - String Reconstruction 方法一:把确定的点的父亲节点设为下一个点,这样访问过的点的根节点都是没访问过的点. 代码: #include<bits/stdc++.h> ...

  9. Python mysql-SQL概要

    2017-09-05 20:10:58 一.SQL语句及其种类 SQL使用关键字,表名,列名等组合成一条语句来描述操作的内容.关键字是指那些含义或者使用方法是先已经定义好的英语单词.根据RDBMS赋予 ...

  10. XAML中格式化日期

    要求被格式化数据的类型是DateTime StringFormat='yyyy-MM-dd' StringFormat={}{0:yyyy-MM-dd}