在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 相关文章推荐
js确认删除对话框效果的示例代码
Feb 20 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
Sep 28 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
Dec 05 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
详解vue引入子组件方法
Feb 12 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 Javascript
分享几个JavaScript运算符的使用技巧
Apr 24 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
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
php数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
详谈php ip2long 出现负数的原因及解决方法
2017/04/05 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
JavaScript的parseInt 取整使用
2011/05/09 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
简单实现bootstrap选项卡效果
2017/02/08 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
python如何读写json数据
2018/03/21 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
python实现串口通信的示例代码
2020/02/10 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
详解Python模块化编程与装饰器
2021/01/16 Python
Python如何telnet到网络设备
2021/02/18 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
大专毕业生自我评价分享
2013/11/10 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
初中信息技术教学反思
2016/02/16 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
Python机器学习三大件之一numpy
2021/05/10 Python
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers