在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é)了一種解決方法。

創(chuàng)新互聯(lián)科技有限公司專業(yè)互聯(lián)網(wǎng)基礎(chǔ)服務(wù)商，為您提供服務(wù)器托管，高防服務(wù)器，成都IDC機(jī)房托管，成都主機(jī)托管等互聯(lián)網(wǎng)服務(wù)。

效果展示

修改前頁面

修改后頁面

實(shí)現(xiàn)思路

要想使模態(tài)框在頂級(jí)頁面打開，我想到的方法是使bootstrap的模態(tài)框彈在父頁面彈出即可。

首先我們將需要彈出的div單獨(dú)寫一個(gè)頁面，當(dāng)子頁面需要彈出時(shí)，在父頁面彈出div即可。

將模態(tài)框單獨(dú)寫為一個(gè)頁面

主頁面

模態(tài)框頁面

  

    ×
    
Modal title
  
  

    這是模態(tài)框
  
  

    保存
    關(guān)閉
  

這樣就可以將模態(tài)框的div單獨(dú)寫為一個(gè)頁面

修改主頁面，加入子頁面

修改后主頁面

這樣主頁面就有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ì)創(chuàng)新互聯(lián)網(wǎng)站的支持！