在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 Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
测试你的JS的掌握程度的代码
Dec 09 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
JS实现websocket长轮询实时消息提示的效果
Oct 10 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 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
多人战的战术与战略
2020/03/04 星际争霸
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
PHP答题类应用接口实例
2015/02/09 PHP
Smarty变量用法详解
2016/05/11 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
toString()一个会自动调用的方法
2010/02/08 Javascript
javascript数组的使用
2013/03/28 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
vue实现记事本功能
2019/06/26 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
python中如何使用朴素贝叶斯算法
2017/04/06 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
上海天奕面试题笔试题
2015/04/19 面试题
工伤事故证明
2014/10/20 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
杭白菊导游词
2015/02/10 职场文书
政协常委会议主持词
2015/07/03 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python