在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操作xml
Nov 04 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
Sep 03 Javascript
js实现图片轮播效果
Dec 19 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
详解angularjs 学习之 scope作用域
Jan 15 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 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
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
一个简单的php加密解密函数(动态加密)
2013/06/19 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
Django框架中的对象列表视图使用示例
2015/07/21 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
Python基于requests库爬取网站信息
2020/03/02 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
python遍历路径破解表单的示例
2020/11/21 Python
python实现计算图形面积
2021/02/22 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
荷兰超市:DEEN
2018/03/14 全球购物
点菜员岗位职责范本
2014/02/14 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
高中班主任培训心得体会
2016/01/07 职场文书
《海上日出》教学反思
2016/02/23 职场文书
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android