在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 相关文章推荐
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 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中一个控制字符串输出的函数
2006/10/09 PHP
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
服务器web工具 php环境下
2010/12/29 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
php微信公众号开发之简答题
2018/10/20 PHP
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
python和ruby,我选谁?
2017/09/13 Python
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
全球最大的游戏市场:G2A
2018/07/05 全球购物
写自荐信要注意什么
2013/12/26 职场文书
高三英语教学反思
2014/01/13 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
群众路线党课主持词
2014/04/01 职场文书
《金子》教学反思
2014/04/13 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
全国税务系统先进集体事迹材料
2014/05/19 职场文书
出纳岗位职责范本
2015/03/31 职场文书
详解php中流行的rpc框架
2021/05/29 PHP
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫