在iFrame子頁(yè)面里實(shí)現(xiàn)模態(tài)框的方法

更新時(shí)間：2018年08月17日 15:23:22 作者：conleyfree

今天小編就為大家分享一篇在iFrame子頁(yè)面里實(shí)現(xiàn)模態(tài)框的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

在 iframe 子頁(yè)面寫模態(tài)框時(shí)，按照以前的寫法，點(diǎn)擊彈出模態(tài)框的按鈕之后一直沒有反應(yīng)，但代碼并沒有寫錯(cuò)，代碼如下：

<input class="btn" id="deletebutton" type="button" value="刪貼" onclick="deletePost()"/>
<!-- 管理員發(fā)送消息模態(tài)框 2017.1.25 -->
<div id="messageModal" class="modal fade" role="dialog" style="display:none">
   <div class="modal-header" >
   <a class="close" data-dismiss="modal">×</a>
   <h3>發(fā)送消息給本貼貼主</h3>
  </div>
  <div class="modal-body" >
   <h4 style="text-align:center;color:red" id="errorMessage"></h4><br/>
   <h4 style="text-align:center">請(qǐng)輸入消息內(nèi)容：<input id="messageContent" type="text" style="width:40%;height:15%" ></h4><br/>
  </div>
  <div class="modal-footer" >
   <a href="#" rel="external nofollow" rel="external nofollow" class="btn btn-success" onclick="callPostEditor()">發(fā)送</a>
   <a href="#" rel="external nofollow" rel="external nofollow" class="btn bt" onclick="reSet()">重置</a>
  </div>
</div>

在網(wǎng)上搜索了很久也沒找到原因，但是看到一種方法，是把模態(tài)框的html代碼放置到父頁(yè)面上，然后使用：

window.parent.$('#messageModal').modal('show');

來調(diào)用模態(tài)框顯示。

如果子頁(yè)面有js方法在模態(tài)框中調(diào)用，再通過下面的語(yǔ)句實(shí)現(xiàn)調(diào)用：

// Conframe是父頁(yè)面的iframe標(biāo)簽的name屬性（注意：不能用id屬性，在Firefox中不能獲取iframe的id屬性）
Conframe.window.callPostEditor();

即“iframe的name屬性.windows.方法名（）”。

以上這篇在iFrame子頁(yè)面里實(shí)現(xiàn)模態(tài)框的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

在iframe中使bootstrap的模態(tài)框在父頁(yè)面彈出問題

相關(guān)文章

微信小程序?qū)崿F(xiàn)時(shí)間選擇
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)時(shí)間選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
JS正則驗(yàn)證郵箱的格式詳細(xì)介紹
這篇文章主要介紹了JS正則驗(yàn)證郵箱的格式。需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-11-11
Echarts讀取動(dòng)態(tài)數(shù)據(jù)完整代碼
這篇文章主要給大家介紹了關(guān)于Echarts讀取動(dòng)態(tài)數(shù)據(jù)的相關(guān)資料,使用Echarts畫圖時(shí),數(shù)據(jù)一般不是靜態(tài)寫死的,而是通過后端接口動(dòng)態(tài)獲取的,需要的朋友可以參考下
2023-10-10
javascript異常處理實(shí)現(xiàn)原理詳解
這篇文章主要介紹了javascript異常處理實(shí)現(xiàn)原理詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-02-02
js仿微博動(dòng)態(tài)欄功能
本文主要介紹了js仿微博動(dòng)態(tài)欄功能的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02
在線演示常用javascript特效
圖形顯示特效鼠標(biāo)驅(qū)動(dòng)圖片變化隨機(jī)顯示banner圖片隨意移動(dòng)圖片定期消失字符連續(xù)消隱文字不停變色JavaScript容錯(cuò)...圖片循環(huán)顯現(xiàn)QQ菜單生成器圖形顯示特效連續(xù)滾動(dòng)的圖片圖片水中倒影純JavaScript時(shí)鐘圖片翻滾導(dǎo)航星星滿天閃爍左側(cè)的極酷...
2008-04-04
簡(jiǎn)單實(shí)現(xiàn)js選項(xiàng)卡切換效果
這篇文章主要為大家詳細(xì)介紹了簡(jiǎn)單實(shí)現(xiàn)js選項(xiàng)卡切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
javascript 簡(jiǎn)練的幾個(gè)函數(shù)
看CSDN上別人的代碼，感覺比較精煉，拿來主義,需要的朋友可以看下。
2009-08-08
微信小程序首頁(yè)的分類功能和搜索功能的實(shí)現(xiàn)思路及代碼詳解
這篇文章主要介紹了微信小程序首頁(yè)的分類功能和搜索功能的實(shí)現(xiàn)思路及代碼詳解,微信宣布了微信小程序開發(fā)者工具新增“云開發(fā)”功能，現(xiàn)在無需服務(wù)器即可實(shí)現(xiàn)小程序的快速迭代，感興趣的朋友跟隨小編一起看看吧
2018-09-09
現(xiàn)代配置YAML對(duì)比JSON優(yōu)勢(shì)分析
這篇文章主要為大家介紹了關(guān)于現(xiàn)代配置指南中YAML對(duì)比JSON的優(yōu)勢(shì)分析說明，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步
2022-02-02