這篇文章主要介紹了在iframe中使bootstrap的模態框在父頁面彈出問題,解決方法非常不錯，具有參考借鑒價值，需要的朋友可以參考下
這幾天在在寫項目的中，頁面使用了iframe，然而在子頁面中使用bootstrap的模態框時發現：彈出的模態框位置是以子頁面為標準居中的，並且遮罩層也只有子頁面那一部分，整個頁面簡直無法直視，所以思考可以讓模態框以父頁面為標準彈出，經過在網上查找資料，總結了一種解決方法。
效果顯示
修改前頁面
修改後頁面
實作想法
#要讓模態框在頂級頁面打開，我想到的方法是讓bootstrap的模態框彈在父親頁面彈出即可。
首先我們將需要彈出的p單獨寫一個頁面，當子頁面需要彈出時，在父頁面彈出p即可。
將模態方塊單獨寫為一個頁面
#主頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p class="modal fade" id="ajax" role="basic" aria-hidden="true">
<p class="modal-dialog">
<p class="modal-content">
</p>
</p>
</p>
</body>
<script>
$("#ajax").modal({
remote: "./model.html"
});
</script>
</html>模態框頁面
<p class="modal-content">
<p class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</p>
<p class="modal-body">
这是模态框
</p>
<p class="modal-footer">
<button type="button" class="btn btn-primary">保存</button>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</p>
</p>這樣就可以將模態框的p單獨寫為一個頁面
修改主頁面，加入子頁面
修改後主頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</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" />
<p class="modal fade" id="ajax" role="basic" aria-hidden="true">
<p class="modal-dialog">
<p class="modal-content">
</p>
</p>
</p>
</body>
<script>
function modalOut(url) {
$("#ajax").modal({
remote: url;
});
}
</script>
</html>這樣主頁面就有2個子頁面，並且將彈出模態框的方法封裝至modalOut(url)方法中
子頁彈出模態框
##當子頁需要彈出模態框時，載入父頁面中的modalOut(url)方法即可：子頁面js如下var _iframe = window.parent; _iframe.modalOut('xxx.html');
以上是在iframe中使bootstrap的在父頁面彈出模態框方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
