在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 相关文章推荐
番茄的表单验证类代码修改版
Jul 18 Javascript
将jQuery应用于login页面的问题及解决
Oct 17 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
setTimeout的延时为0时多个浏览器的区别
May 23 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
jQuery is()函数用法3例
May 06 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
JavaScript数组和对象的复制
Mar 21 Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 Javascript
使用Vue制作图片轮播组件思路详解
Mar 21 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
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
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
深入file_get_contents与curl函数的详解
2013/06/25 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
浅谈layui 表单元素的选中问题
2019/10/25 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
Python实现把数字转换成中文
2015/06/29 Python
python实现中文转换url编码的方法
2016/06/14 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
Python中super函数的用法
2017/11/17 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
Python3实现飞机大战游戏
2020/04/24 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
JAVA代码查错题
2014/10/10 面试题
上课说话检讨书500字
2014/11/01 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书