在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游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
Vue实现web分页组件详解
Nov 28 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
vue在手机中通过本机IP地址访问webApp的方法
Aug 15 Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 Javascript
JavaScript实现的九种排序算法
Mar 04 Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
JavaScript用document.write()输出换行的示例代码
Nov 26 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_Flame(Version:Progress)的原代码
2006/10/09 PHP
PHP操作Memcache实例介绍
2013/06/14 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
js arguments.callee的应用代码
2009/05/07 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
angular.js实现购物车功能
2017/10/23 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
python列表去重的二种方法
2014/02/14 Python
介绍Python中内置的itertools模块
2015/04/29 Python
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
Python单元测试简单示例
2018/07/03 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
Python matplotlib实时画图案例
2020/04/23 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
个人自我鉴定总结
2014/03/25 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
南京南京观后感
2015/06/02 职场文书
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA