快捷導(dǎo)航

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

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

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

在 iframe 子頁面寫模態(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">請輸入消息內(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代碼放置到父頁面上，然后使用：

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

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

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

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

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

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

您可能感興趣的文章:

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

相關(guān)文章

JavaScript設(shè)計(jì)模式之外觀模式介紹
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之外觀模式介紹,外觀模式是用于由于子系統(tǒng)或程序組成較復(fù)雜而提供的一個(gè)高層界面接口,使用客戶端更容易訪問底層的程序或系統(tǒng)接口,需要的朋友可以參考下
2014-12-12
js的延遲執(zhí)行問題分析
使用JavaScript可以實(shí)現(xiàn)代碼的延時(shí)執(zhí)行，也就是說當(dāng)一個(gè)函數(shù)被調(diào)用時(shí)不立即執(zhí)行某些代碼，而是等一段指定的時(shí)間后再執(zhí)行，這就叫做計(jì)時(shí)事件。
2014-06-06
JavaScript實(shí)現(xiàn)帶并發(fā)限制的異步調(diào)度器
這篇文章主要為大家詳細(xì)介紹了如何基于JS實(shí)現(xiàn)一個(gè)帶并發(fā)限制的異步調(diào)度器?Scheduler,保證同時(shí)運(yùn)行的任務(wù)最多有N個(gè),感興趣的小伙伴可以了解下
2024-03-03
基于JavaScript實(shí)現(xiàn)瀏覽器添加收藏功能
今天搞項(xiàng)目的時(shí)候?yàn)榱藢?shí)現(xiàn)瀏覽者實(shí)現(xiàn)添加收藏的功能，特地了解了一下相關(guān)的API，整理了一段代碼幫助大家實(shí)現(xiàn)瀏覽器添加收藏功能，感興趣的朋友跟隨小編一起看看吧
2023-02-02
JavaScript實(shí)現(xiàn)簡單精致的圖片左右無縫滾動效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡單精致的圖片左右無縫滾動效果,涉及javascript結(jié)合時(shí)間函數(shù)動態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下
2017-03-03
JS實(shí)現(xiàn)的將html轉(zhuǎn)為pdf功能【基于瀏覽器端插件jsPDF】
這篇文章主要介紹了JS實(shí)現(xiàn)的將html轉(zhuǎn)為pdf功能,結(jié)合完整實(shí)例形式分析了基于瀏覽器端插件jsPDF實(shí)現(xiàn)的HTML格式數(shù)據(jù)轉(zhuǎn)換成pdf具體操作技巧,需要的朋友可以參考下
2018-02-02
JavaScript實(shí)現(xiàn)4位隨機(jī)驗(yàn)證碼的生成
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)4位隨機(jī)驗(yàn)證碼的生成，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-01-01
使用javascript創(chuàng)建快捷方式的簡單實(shí)例
這篇文章介紹了使用javascript創(chuàng)建快捷方式的簡單實(shí)例，有需要的朋友可以參考一下
2013-08-08
JS延時(shí)提示框?qū)崿F(xiàn)方法詳解
這篇文章主要介紹了JS延時(shí)提示框?qū)崿F(xiàn)方法,以實(shí)例形式較為詳細(xì)的分析了JavaScript實(shí)現(xiàn)延時(shí)提示功能的原理與具體實(shí)現(xiàn)步驟,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-11-11
javascript每日必學(xué)之封裝
javascript每日必學(xué)之封裝，介紹了有關(guān)封裝的相關(guān)內(nèi)容，感興趣的小伙伴們可以參考一下
2016-02-02