在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 关键字屏蔽实现函数
Aug 02 Javascript
jQuery cdn使用介绍
May 08 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
vue弹窗消息组件的使用方法
Sep 24 Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 Javascript
详解使用 Node.js 开发简单的脚手架工具
Jun 08 Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
实例讲解React 组件生命周期
Jul 08 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
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
JS定时器实例
2013/04/17 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
深入探究node之Transform
2017/07/20 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
Vue中watch、computed、updated三者的区别及用法
2020/07/27 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
使用python实现递归版汉诺塔示例(汉诺塔递归算法)
2014/04/08 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
物流经理自我评价
2013/09/23 职场文书
财务部岗位职责
2013/11/19 职场文书
会计助理岗位职责
2014/02/17 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
继承权公证书
2014/04/09 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
上诉状格式
2015/05/23 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang
用Python创建简易网站图文教程
2021/06/11 Python
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis