在iframe中使bootstrap的模態(tài)框在父頁面彈出問題
這幾天在寫項(xiàng)目的中，頁面使用了iframe，然而在子頁面中使用bootstrap的模態(tài)框時(shí)發(fā)現(xiàn)：彈出的模態(tài)框位置是以子頁面為標(biāo)準(zhǔn)居中的，并且遮罩層也只有子頁面那一部分，整個(gè)頁面簡(jiǎn)直無法直視，所以思考可以可以讓模態(tài)框以父頁面為標(biāo)準(zhǔn)彈出，經(jīng)過在網(wǎng)上查找資料，總結(jié)了一種解決方法。
效果展示
修改前頁面
修改后頁面
實(shí)現(xiàn)思路
要想使模態(tài)框在頂級(jí)頁面打開，我想到的方法是使bootstrap的模態(tài)框彈在父頁面彈出即可。
首先我們將需要彈出的div單獨(dú)寫一個(gè)頁面，當(dāng)子頁面需要彈出時(shí)，在父頁面彈出div即可。
將模態(tài)框單獨(dú)寫為一個(gè)頁面
主頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="modal fade" id="ajax" role="basic" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
</body>
<script>
$("#ajax").modal({
remote: "./model.html"
});
</script>
</html>
模態(tài)框頁面
<div class="modal-content">
<div 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>
</div>
<div class="modal-body">
這是模態(tài)框
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">保存</button>
<button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
</div>
</div>
這樣就可以將模態(tài)框的div單獨(dú)寫為一個(gè)頁面
修改主頁面，加入子頁面
修改后主頁面
<!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" />
<div class="modal fade" id="ajax" role="basic" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
</body>
<script>
function modalOut(url) {
$("#ajax").modal({
remote: url;
});
}
</script>
</html>
這樣主頁面就有2個(gè)子頁面，并且將彈出模態(tài)框的方法封裝至modalOut(url)方法中
子頁面彈出模態(tài)框
當(dāng)子頁面需要彈出模態(tài)框時(shí)，加載父頁面中的modalOut(url)方法即可：
子頁面js如下
var _iframe = window.parent;
_iframe.modalOut('xxx.html');
以上就是解決子頁面中彈出模態(tài)框無法覆蓋全部頁面的解決辦法，
注意：所以html中未加載js，請(qǐng)自行加載bootstrap相關(guān)的js。
總結(jié)
以上所述是小編給大家介紹的在iframe中使bootstrap的模態(tài)框在父頁面彈出問題，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- 頁面遮罩層，并且阻止頁面body滾動(dòng)。bootstrap模態(tài)框原理
- Bootstrap每天必學(xué)之模態(tài)框（Modal）插件
- 淺析BootStrap中Modal（模態(tài)框）使用心得
- Bootstrap 模態(tài)框（Modal）帶參數(shù)傳值實(shí)例
- bootstrap模態(tài)框消失問題的解決方法
- Bootstrap模態(tài)框(modal)垂直居中的實(shí)例代碼
- bootstrap 模態(tài)框（modal）實(shí)現(xiàn)水平垂直居中顯示
- BootStrap 模態(tài)框?qū)崿F(xiàn)刷新網(wǎng)頁并關(guān)閉功能
- Bootstrap模態(tài)框禁用空白處點(diǎn)擊關(guān)閉
- Bootstrap實(shí)現(xiàn)模態(tài)框效果
相關(guān)文章
Cordova(ionic)項(xiàng)目實(shí)現(xiàn)雙擊返回鍵退出應(yīng)用
這篇文章主要為大家詳細(xì)介紹了Cordova項(xiàng)目實(shí)現(xiàn)雙擊返回鍵退出應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
前端防止用戶重復(fù)提交js實(shí)現(xiàn)代碼示例
這篇文章主要給大家介紹了關(guān)于前端防止用戶重復(fù)提交js實(shí)現(xiàn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起看看吧2018-09-09
一個(gè)JavaScript遞歸實(shí)現(xiàn)反轉(zhuǎn)數(shù)組字符串的實(shí)例
這篇文章主要介紹了一個(gè)JavaScript遞歸實(shí)現(xiàn)反轉(zhuǎn)數(shù)組字符串的實(shí)例，很不錯(cuò)，非常適合新手朋友們2014-10-10
AJAX XMLHttpRequest對(duì)象創(chuàng)建使用詳解
這篇文章主要介紹了AJAX XMLHttpRequest對(duì)象創(chuàng)建使用詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
使用canvas實(shí)現(xiàn)魔法攝像頭的示例代碼
我們用手機(jī)的攝像頭自拍,很容易實(shí)現(xiàn)簡(jiǎn)單的自拍效果,如復(fù)古、黑白等等,其實(shí)我們使用web端的JavaScript也是可以實(shí)現(xiàn)的,接下來就帶領(lǐng)小伙伴實(shí)現(xiàn)一個(gè)魔法攝像頭,并且提供了截圖下載功能,需要的朋友可以參考下2023-08-08
基于JavaScript實(shí)現(xiàn)前端文件的斷點(diǎn)續(xù)傳
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)前端文件的斷點(diǎn)續(xù)傳的相關(guān)資料,需要的朋友可以參考下2016-10-10
JS實(shí)現(xiàn)讀取Excel文件內(nèi)容并生成二維碼
這篇文章主要為大家介紹了如何使用JavaScript實(shí)現(xiàn)讀取Excel文件內(nèi)容并生成二維碼下載到本地，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2022-04-04
window.open()實(shí)現(xiàn)post傳遞參數(shù)
本文主要向大家介紹了如何使用window.open()實(shí)現(xiàn)post傳遞參數(shù)的方法，思路是參考的一位網(wǎng)友的，然后根據(jù)自己的項(xiàng)目需求做了些調(diào)整，這里同樣分享給大家，希望對(duì)大家能夠有所幫助。2015-03-03
本文主要介紹了javaScript的基礎(chǔ)知識(shí)，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
基于JS代碼實(shí)現(xiàn)導(dǎo)航條彈出式懸浮菜單
這篇文章主要介紹了基于JS代碼實(shí)現(xiàn)導(dǎo)航條彈出式懸浮菜單的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06