在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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
JavaScript中模拟实现jsonp
Jun 19 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
Mar 02 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
ajax前台后台跨域请求处理方式
Feb 08 Javascript
使用vue-cli编写vue插件的方法
Feb 26 Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 Javascript
JavaScript实现优先级队列
Dec 06 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获取301跳转URL简单实例
2013/12/16 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
2018/04/04 PHP
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
python数据挖掘需要学的内容
2019/06/23 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
python进度条显示之tqmd模块
2020/08/22 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
爱游人:Travelliker
2017/09/05 全球购物
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
Python里面search()和match()的区别
2016/09/21 面试题
市场营销专业毕业生自荐信
2013/11/02 职场文书
前厅收银主管岗位职责
2014/02/04 职场文书
会计学生自我鉴定
2014/02/06 职场文书
机关单位动员会主持词
2014/03/20 职场文书
个人安全承诺书
2014/05/22 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书