我这里要实现的效果是子集iframe页面点击背景那个头像旁边的一个取消按钮要跳出这个模态框,这个模态框HTML在当前页面也就是子页面iframe的母级页面,取消按钮在子集iframe里面上面有个enterOut(),所以问题来了,怎么去实现(当前是妈妈,要点击右边儿子是iframe里面那个取消按钮实现弹出模态框效果)

<div id="hz_qxalert1_id" style="position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 999; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.701961);">
<div id="hz_qxalert1_id_next" style="width: 400px; height: 203px; padding: 0px 0px 20px; position: absolute; top: 77px; left: 484px; z-index: 500; border: 1px solid rgb(22, 138, 187); border-radius: 5px; overflow: hidden; display: block; background: rgb(255, 255, 255);">
<p style="padding: 0 0 0 28px;text-align: left; height:50px; line-height:50px; z-index: 500;">消息会诊</p>
<hr style="border-color:#ccc;width: 80%;margin: 0 auto;">
<p class="alert_text" style="height: 80px; line-height:80px; z-index: 500;text-align: center;">您将取消会诊,确认取消会诊吗?</p>
<button οnclick="enterOut()" class="btn1" style=" z-index: 500;height:30px; outline: none;text-align: center;background: #168ABB;border:0;color:#fff; border-radius:5px;width: 89px;margin-left: 185px;">是</button>
<button class="btn1" style="height:30px; outline: none;text-align: center;background: #168ABB;border:0;color:#fff; border-radius:5px;width: 89px; z-index: 500;">否</button>
</div>
</div>

上图是当前页面一个id为hz_qxalert1_id的模态框和一个class为box的div,

然后box里面套了一个content类

这里是当前页面所套的ifreme我们先找它的ID找到了 才能解决一系列问题哦

子集iframe这样写

function son{

//让父级的模态框遮罩层显示出来
parent.document.getElementById('hz_qxalert1_id').style.display = "block";

//获取遮罩层的宽、高
var modelWidth = self.parent.$('#hz_qxalert1_id').width();
var modelHeight= self.parent.$('#hz_qxalert1_id').height();

//获取取消会诊确认框的宽、高
var alertWidth = self.parent.$('#hz_qxalert1_id_next').width();
var alertHeight= self.parent.$('#hz_qxalert1_id_next').height();

//让取消会诊确认框相对于模态框居中
parent.document.getElementById('hz_qxalert1_id_next').style.left = (modelWidth-alertWidth)/2+"px";
parent.document.getElementById('hz_qxalert1_id_next').style.top = (modelHeight-alertHeight)/2+"px";

//让取消会诊的确认框显示出来
parent.document.getElementById('hz_qxalert1_id_next').style.display = "block";
//这里下面这句就可以找到第一个iframe啦然后赋值哦
var content_inner_iframe_id = parent.$('.content_inner').children('iframe:eq(0)').attr('id');
parent.myIframeId = content_inner_iframe_id;
console.log(content_inner_iframe_id);

}

然后在当前(母级)页面写这样一个方法

function enterOut(){

//隐藏取消会诊消息模态框
document.getElementById('hz_qxalert1_id').style.display = "none";

//隐藏取消会诊消息框
document.getElementById('hz_qxalert1_id_next').style.display = "none";

//执行取消会诊事件(拿到子级写好的id这里当前页面直接拿来然后调用没毛病)
var childrenFun = document.getElementById(myIframeId).contentWindow;
childrenFun.enterOut();
}

转载于:https://www.cnblogs.com/hjptopshow/p/6859999.html

当前页面怎么调用子集iframe页面的方法相关推荐

  1. 通过setTimeout调用设置iframe src的方法导致刷新页面时弹出没有权限错误!

    通过setTimeout调用设置iframe src的方法导致刷新页面时弹出没有权限错误! 如下: Html代码 <iframe tabindex="4" id=" ...

  2. php编写用户登录页面,js+php实现静态页面实时调用用户登陆状态的方法

    这篇文章主要介绍了js+php实现静态页面实时调用用户登陆状态的方法,采用在静态页面中使用js调用php页面从而实现用户登录状态的实时调用功能,需要的朋友可以参考下 本文实例讲述了js+php实现静态 ...

  3. HTML5怎么编辑另一个页面,html中嵌套iframe页面 如何将一个html页面中嵌入另一个html页面...

    如何将一个html页面中嵌入另一个html页面 将一个html页面中嵌入另一个html页面需要使用到iframe标签. iframe标签用法: scrolling禁止鼠标滑动,frameborder嵌 ...

  4. 从一个页面中调用另一个页面的数据

    举例:在登录某系统成功后,在下一个页面显示:XXX欢迎您的使用!这个XXX就是系统登录时的用户,下面有两种方法可以实现: 1.设计两个窗体Form1和Form2: 注:textBox1控件的Modif ...

  5. html 两个iframe重叠,解决同一页面中两个iframe互相调用jquery,js函数的方法

    这一个月又没更新博客,唉,懒癌又犯了,今天解决了一个问题,关于两个iframe互相调用jquery函数方法 a.html中有两个iframe,如下: b.html中有一个treeview,称为左菜单i ...

  6. 解决同一页面中两个iframe互相调用jquery,js函数

    这一个月又没更新博客,唉,懒癌又犯了,今天解决了一个问题,关于两个iframe互相调用jquery函数方法 a.html中有两个iframe,如下: <iframewidth="100 ...

  7. JavaScript frame跨域获取元素、修改元素属性、调用其他frame页面方法

    今天做了一个frameset的集合页面,其中有多个iframe页面,其中点击frame=leftMenu里的按钮元素后,需要修改frame=Header页面里的一个div元素属性. 1.主页面架构 & ...

  8. iframe优缺点、X-Frame-Options(如何防止点击劫持、设置页面是否能作为iframe嵌套)、iframe长轮询和应用场景

    目录 iframe优缺点 优点 缺点 为什么尽量少用iframe iframes阻塞页面加载,影响网页加载速度 唯一的连接池 解决 iframe应用场景 iframe长轮询 iframe跨域使用 防嵌 ...

  9. ASPX页面AJAX调用ASPX后台

    虽然aspx现在用的越来越少,但是以前的一些项目仍旧是使用WebForm来实现的,我们仍然会遇到使用WebForm 并且实现AJAX的需求: 现在提供两种方法来实现aspx页面通过ajax调用aspx ...

最新文章

  1. 一种医学图像分割的新思路【nnU-Net网络配置教程】
  2. Oracle常用系统表
  3. AMD的AI策略与Intel和Nvidia有何不同?
  4. 浏览器与服务器通信技术——Ajax详解
  5. poj 3207 Ikki's Story IV - Panda's Trick(2-SAT)
  6. centos7安装dhcp服务器并由客户端动态获取IP地址
  7. Java Spring源代码研究之Bean的名称是大小写相关吗?
  8. 你的GitHub,怎么和我用的不太一样?
  9. html英文怎么换成中文的,英文版Win7系统怎么换成中文的
  10. 基于库函数STM32流水灯的实现
  11. mysql数据库操作类
  12. MySQL 对 CREATE TABLE IF NOT EXISTS SELECT 的处理
  13. 2021-06-07java继承
  14. 阿里Java开发规范
  15. 上海租房。20160420
  16. 文件服务器域用户配额,域账号配额
  17. 外汇EA如何需看这四点
  18. WebService--CXF与Spring的整合(jaxws:endpoint形式配置)以及客户端调用(spring配置文件形式,不需要生成客户端代码)
  19. LORA大模型加速微调和训练算法
  20. python中用plt画图

热门文章

  1. 设计模式:外观模式(Facade)
  2. Reflection
  3. 北海a货翡翠,牡丹江a货翡翠
  4. Expert 诊断优化系列------------------透过等待看系统
  5. 6、Gerrit插件
  6. 程序员版本管理知识 Git 详细整理
  7. 第14章 结构和其他数据形式 14.12 typedef 简介
  8. FreeSWITCH与PSTN对接
  9. 图解Android - 如何看Android的UML 图?
  10. HTC解锁其Verizon和ATT等Android设备的Bootloader