在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 grid panel自带滚动条失效的解决方法
Sep 11 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
详解jQuery中ajax.load()方法
Jan 25 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
Echarts实现单条折线可拖拽效果
Dec 19 Javascript
Vue 打包后相对路径的引用问题
Jun 05 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
关于PHP堆栈与列队的学习
2013/06/21 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
cakephp常见知识点汇总
2017/02/24 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
jscript之List Excel Color Values
2007/06/13 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
Python 的类、继承和多态详解
2017/07/16 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
Python实现购物车程序
2018/04/16 Python
使用python实现简单五子棋游戏
2019/06/18 Python
python pycharm的安装及其使用
2019/10/11 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
python如何调用字典的key
2020/05/25 Python
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
高中历史教学反思
2014/02/08 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python