bootstrap在iframe框架中实现由子页面在顶级页面打开模态框（modal）
我需要完成的效果：
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
?
轉載于:https://www.cnblogs.com/chengxuyuanzhilu/p/5132328.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的bootstrap在iframe框架中实现由子页面在顶级页面打开模态框（modal）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 常用的加密解密算法
- 下一篇： 水系图一般在哪里找得到_真空排水系统在综