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

2018/03 09 19:03

我需要完成的效果:

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

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

 

问题描述:

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

如下效果:

1.主页面代码:

复制代码

复制代码

2.子页面代码:

复制代码

复制代码

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

问题在于遮罩层,渲染完后查看遮罩层代码如下:"<div id='backdropId' class='modal-backdrop fade in'></div>"

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

复制代码

复制代码

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

--转载请注明: https://www.guangboyuan.cn/bootstrap%e5%9c%a8iframe%e6%a1%86%e6%9e%b6%e4%b8%ad%e5%ae%9e%e7%8e%b0%e7%94%b1%e5%ad%90%e9%a1%b5%e9%9d%a2%e5%9c%a8%e9%a1%b6%e7%ba%a7%e9%a1%b5%e9%9d%a2%e6%89%93%e5%bc%80%e6%a8%a1%e6%80%81%e6%a1%86/

发表回复

(必填)