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


Posted in Javascript onAugust 17, 2018

在 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子页面里实现模态框的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript之大字符串的连接的StringBuffer 类
May 08 Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 #Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 #Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 #Javascript
Vue组件创建和传值的方法
Aug 17 #Javascript
webpack多入口多出口的实现方法
Aug 17 #Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 #Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 #Javascript
You might like
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
javascript 异常处理使用总结
2009/06/21 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
vue的mixins属性详解
2018/03/14 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
对python For 循环的三种遍历方式解析
2019/02/01 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
python实现BP神经网络回归预测模型
2019/08/09 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
哪些是python中web开发框架
2020/06/17 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
电子技术专业中专生的自我评价
2013/12/17 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android
安装harbor作为docker镜像仓库的问题
2022/06/14 Servers