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

我需要完成的效果：

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

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

 

问题描述：

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

如下效果：

1.主页面代码：

 

 

2.子页面代码：

 

    
        
        
        
    
    
        

            
                听一场摇滚，和耳朵一起一醉方休；

                喝一圈烈酒，让酒腻子们闻风丧胆；

                开一场cosplay party，二次元万岁；

                摸一下大蜥蜴，我熊胆威风凌厉；

                吃三斤驴打滚，翻滚吧肠胃；

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

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

 

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

问题在于遮罩层，渲染完后查看遮罩层代码如下："

"

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

 

    
        
        
        
    
    
        

            
                听一场摇滚，和耳朵一起一醉方休；

                喝一圈烈酒，让酒腻子们闻风丧胆；

                开一场cosplay party，二次元万岁；

                摸一下大蜥蜴，我熊胆威风凌厉；

                吃三斤驴打滚，翻滚吧肠胃；

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

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

 

主要方面：
 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