在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 相关文章推荐
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
JavaScript网页定位详解
Jan 13 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
window.returnValue使用方法示例介绍
Jul 03 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 Javascript
vue中 this.$set的使用详解
Nov 17 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
PHP4之真OO
2006/10/09 PHP
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
numpy中索引和切片详解
2017/12/15 Python
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
python字符串循环左移
2019/03/08 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
酒店保洁主管岗位职责
2013/11/28 职场文书
旅游专业职业生涯规划范文
2014/01/13 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书
2014年科研工作总结
2014/12/03 职场文书
长城导游词300字
2015/01/30 职场文书
婚宴主持词
2015/06/30 职场文书
MySQL sql模式设置引起的问题
2022/05/15 MySQL