背景：
目前公司有兩個後臺系統系統a和系統b，現在的需求是將系統b中網頁嵌入到系統a中，所以使用了iframe，開始在子窗口中打開的modal並不能遮住父窗口，現在已經解決。
解決思路：
包括兩部分：1.打開modal，在子窗體中給要打開modal的按鈕綁定事件，觸發事件後將準備好的modal部分和遮罩部分插入到父窗體的body中，這樣modal就能打開了(這個是在子窗體的代碼中實現) 2.關閉modal，給modal中關閉modal的地方綁定事件，觸發事件後移除插入的遮罩和modal(這個是在父窗體的代碼中實現)
完整代碼：
主頁面main.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<table width="100%" height="720px" border="1" >
<tr>
<td>
左側
</td>
<td>
<iframe name="child1" src="./child1.html" width="100%" height="100%"></iframe>
</td>
</tr>
</table>
</body>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
//關閉模態框
$("body").on("click", ".close,.myclose",function(e){
$("#backdropId").remove(); //移除遮罩
$("#pages").remove(); //關閉modal內容
});
</script>
</html>
子窗體child1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div >
<font color="#000000" size="4">
聽一場搖滾，和耳朵一起一醉方休；<br />
喝一圈烈酒，讓酒膩子們聞風喪膽；<br />
開一場cosplay party，二次元萬歲；<br />
摸一下大蜥蜴，我熊膽威風凌厲；<br />
吃三斤驢打滾，翻滾吧腸胃；<br />
飈一把摩托車，成爲風馳電掣的女王；<br />
見一下微博紅人，感受馬伯庸親王的慈祥；
</font>
</div>
<button onclick="return newopenModal();">點擊吧</button>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
//打開模態框方法1
function openModal(){
var fatherBody = $(window.top.document.body); //獲得父窗體的body
var id = 'pages';
dialog = $('<div class="modal fade" role="dialog" id="' + id + '"/>'); //創建一個modal
dialog.appendTo(fatherBody); //把創建的modal放到父窗體的body中
dialog.load("modal.html", function() { //爲模態框的主體注入內容
dialog.modal({
backdrop: false
});
});
fatherBody.append("<div id='backdropId' class='modal-backdrop fade in'></div>"); //遮罩
}
//打開模態框方法2
function newopenModal(){
var fatherBody = $(window.top.document.body); //獲得父窗體的body
fatherBody.append(' \
<div class="modal fade in" id="pages" role="dialog" style="padding-left: 16px; display: block;"> \
<div class="modal-dialog"> \
<div class="modal-content"> \
<div class="modal-header"> \
<button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button> \
<h4 class="modal-title" id="myModalLabel">模態框（Modal）標題</h4> \
</div> \
<div class="modal-body">在這裏添加一些文本</div> \
<div class="modal-footer pp"> \
<button class="btn btn-default myclose" type="button" data-dismiss="modal">關閉</button> \
<button class="btn btn-primary" type="button">提交更改</button> \
</div> \
</div>< \
</div> \
</div>'); //爲父窗體添加modal內容
fatherBody.append("<div id='backdropId' class='modal-backdrop fade in'></div>"); //爲父窗體添加遮罩
}
</script>
</body>
</html>
參考：
bootstrap在iframe框架中實現由子頁面在頂級頁面打開模態框（modal）結：靈感來自於此，受啓發並經過改造實現了上述功能
Bootstrap的模態框遮罩在iframe子頁面彈出時不能覆蓋父頁面的解決方法 結：關閉的實現不能放在子頁面，因爲在遮罩打開時整個頁面除了modal都是被遮住的，其它地方都不可點擊
當然上述的實現方法是畸形的，如果你還沒有開始着手，建議使用layui的layer，裏面有iframe層的實現，我在這裏也進行了實現。
完整代碼：
主頁面main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<table width="100%" height="720px" border="1" >
<tr>
<td>
左側
</td>
<td>
<iframe name="child1" src="./child1.html" width="100%" height="100%"></iframe>
</td>
</tr>
</table>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
</body>
</html>
子頁面child1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>開始使用layer</title>
</head>
<body>
<button id="parentIframe">按鈕</button>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script> <!-- 你必須先引入jQuery1.8或以上版本 -->
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<script>
//彈出一個iframe層
$('#parentIframe').on('click', function(){
//iframe層
parent.layer.open({
type: 2,
title: 'layer mobile頁',
shadeClose: true,
shade: 0.8,
area: ['380px', '90%'],
content: 'http://layer.layui.com/mobile' //iframe的url
});
});
</script>
</body>
</html>
顯然實現一個通過子窗口打開的彈出層並將遮罩也能遮住父窗體，layer更加簡潔