在iFrame子页面里实现模态框的方法

 更新时间:2018年08月17日 15:23:22   作者:conleyfree  
今天小编就为大家分享一篇在iFrame子页面里实现模态框的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

在 iframe 子页面写模态框时,按照以前的写法,点击弹出模态框的按钮之后一直没有反应,但代码并没有写错,代码如下:

<input class="btn" id="deletebutton" type="button" value="删贴" onclick="deletePost()"/>
<!-- 管理员发送消息模态框 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>发送消息给本贴贴主</h3>
  </div>
  <div class="modal-body" >
   <h4 style="text-align:center;color:red" id="errorMessage"></h4><br/>
   <h4 style="text-align:center">请输入消息内容:<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()">发送</a>
   <a href="#" rel="external nofollow" rel="external nofollow" class="btn bt" onclick="reSet()">重置</a>
  </div>
</div>

在网上搜索了很久也没找到原因,但是看到一种方法,是把模态框的html代码放置到父页面上,然后使用:

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

来调用模态框显示。

如果子页面有js方法在模态框中调用,再通过下面的语句实现调用:

// Conframe是父页面的iframe标签的name属性(注意:不能用id属性,在Firefox中不能获取iframe的id属性)
Conframe.window.callPostEditor();

即“iframe的name属性.windows.方法名()”。

以上这篇在iFrame子页面里实现模态框的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 微信小程序实现时间选择

    微信小程序实现时间选择

    这篇文章主要为大家详细介绍了微信小程序实现时间选择,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JS正则验证邮箱的格式详细介绍

    JS正则验证邮箱的格式详细介绍

    这篇文章主要介绍了JS正则验证邮箱的格式。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • Echarts读取动态数据完整代码

    Echarts读取动态数据完整代码

    这篇文章主要给大家介绍了关于Echarts读取动态数据的相关资料,使用Echarts画图时,数据一般不是静态写死的,而是通过后端接口动态获取的,需要的朋友可以参考下
    2023-10-10
  • javascript异常处理实现原理详解

    javascript异常处理实现原理详解

    这篇文章主要介绍了javascript异常处理实现原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • js仿微博动态栏功能

    js仿微博动态栏功能

    本文主要介绍了js仿微博动态栏功能的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 在线演示常用javascript特效

    在线演示常用javascript特效

    图形显示特效鼠标驱动图片变化随机显示banner图片随意移动图片定期消失字符连续消隐文字不停变色JavaScript容错...图片循环显现QQ菜单生成器图形显示特效连续滚动的图片图片水中倒影纯JavaScript时钟图片翻滚导航星星满天闪烁左侧的极酷...
    2008-04-04
  • 简单实现js选项卡切换效果

    简单实现js选项卡切换效果

    这篇文章主要为大家详细介绍了简单实现js选项卡切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • javascript 简练的几个函数

    javascript 简练的几个函数

    看CSDN上别人的代码,感觉比较精炼,拿来主义,需要的朋友可以看下。
    2009-08-08
  • 微信小程序首页的分类功能和搜索功能的实现思路及代码详解

    微信小程序首页的分类功能和搜索功能的实现思路及代码详解

    这篇文章主要介绍了微信小程序首页的分类功能和搜索功能的实现思路及代码详解,微信宣布了微信小程序开发者工具新增“云开发”功能,现在无需服务器即可实现小程序的快速迭代,感兴趣的朋友跟随小编一起看看吧
    2018-09-09
  • 现代配置YAML对比JSON优势分析

    现代配置YAML对比JSON优势分析

    这篇文章主要为大家介绍了关于现代配置指南中YAML对比JSON的优势分析说明,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步
    2022-02-02

最新评论