在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 相关文章推荐
基于jQuery试卷自动排版系统
Jul 18 Javascript
JS中的this变量的使用介绍
Oct 21 Javascript
jquery html动态生成select标签出问题的解决方法
Nov 20 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
微信小程序自定义底部弹出框动画
Nov 18 Javascript
分享15个Webpack实用的插件!!!
Mar 31 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数组删除元素示例
2014/03/21 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
tp5 实现列表数据根据状态排序
2019/10/18 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
javascript 打印页面代码
2009/03/24 Javascript
js确定对象类型方法
2012/03/30 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
2017/03/09 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
详解重置Django migration的常见方式
2019/02/15 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
使用python实现简单五子棋游戏
2019/06/18 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
python读取excel进行遍历/xlrd模块操作
2020/07/12 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
医生见习报告范文
2014/11/03 职场文书
民主评议党员个人总结
2015/02/13 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
运动会广播稿100字
2015/08/19 职场文书
python非标准时间的转换
2021/07/25 Python