在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中获取元素索引的函数
Sep 10 Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 Javascript
angularJS结合canvas画图例子
Feb 09 Javascript
jquery mobile开发常见问题分析
Jan 21 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
Aug 24 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
web前端vue filter 过滤器
Jan 12 Javascript
vue实现文件上传功能
Aug 13 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 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高级对象构建 多个构造函数的使用
2012/02/05 PHP
php循环table实现一行两列显示的方法
2015/06/04 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
PHP微信分享开发详解
2017/01/14 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
js导出txt示例代码
2014/01/14 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
python之wxPython应用实例
2014/09/28 Python
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
奥地利网上书店:Weltbild
2017/07/14 全球购物
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
AJAX的全称是什么
2012/11/06 面试题
机电一体化应届生求职信范文
2014/01/24 职场文书
优秀员工评语
2014/02/10 职场文书
渡河少年教学反思
2014/02/12 职场文书
大二学生自我检讨书
2014/10/23 职场文书
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android
python3 字符串str和bytes相互转换
2022/03/23 Python