如何在iframe内部弹出浮层,浮层遮罩整个浏览器

2023-11-04

需求说明:

  • 页面内有多级iframe嵌套;
  • iframe内部某些按钮点击后需要弹出浮层;
  • 浮层需要将整个浏览器窗口遮罩,且浮层位于浏览窗口中部。

解决思路:

  • 顶层页面内预留用于显示浮层的div(命名为popdiv),且该div内有一预留的iframe,该iframe用于加载浮层内容,命名为popiframe;
  • 提供可以直接访问浮层内容的url连接;
  • iframe触发显示浮层事件时,通过window.top 设置顶层窗口的popiframe.src;
  • 通过计算浮层内容的长宽及当前窗口的长宽设置popdiv的位置,使其在窗口中央显示。

效果如图:

这里写图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在iframe内部弹出浮层,浮层遮罩整个浏览器 的相关文章

随机推荐

  • frp安全内网穿透,安全远程windows,暴露服务

    目录 概述 公网服务器端 内网Windows客户端 外网Windows客户端 附加 暴露多台内网Windows客户端 附加 暴露服务 总结 概述 frp 是一个专注于内网穿透的高性能的反向代理应用 支持 TCP UDP HTTP HTTPS
  • pip在线安装selenium

    最近发布了selenium3 0 但是会有很多莫名其妙的报错 原来可执行的代码也报错了 所以要重新安装回2 0 一 2 7 10之后的python安装包自带了Pip和setuptools 如果你没有安装可以去官网单独下载然后安装 a 下载地
  • js取值方式

    1 根据class id 取 input 标签的value 值 jQuery className val idName val javaScript document getElementById idName value 2 根据clas
  • GPRS本质论

    GPRS DTU最基本的用法是 在DTU中放入一张开通GPRS功能的SIM卡 DTU上电后先注册到GPRS网络 然后通过GPRS网络和数据处理中心建立连接 这条连接涉及了无线网络运营商 因特网宽 带供应商 用户公司的网络情况 以及用户的电脑
  • 使用ELK收集网络设备日志的案例

    简介 随着机房内的服务器和网络设备增加 日志管理和查询就成了让系统管理员头疼的事 系统管理员遇到的常见问题如下 1 日常维护过程中不可能登录到每一台服务器和设备上去查看日志 2 网络设备上的存储空间有限 不可能存储日期太长的日志 而系统出现
  • 解决github下载慢的问题可以提速【1M/s】

    1 问题描述 在github上下载项目时 下载速度经常都是20k s的速度下载 项目过大时还经常会显示网络出错导致下载失败 2 原因 我想对于经常使用git的人来讲 很可能已经知道了 对于新手刚接触git的人来讲 可能你只知道github
  • 分享!一文简析RASP技术

    众所周知 log4j 2 x安全事件引起了轩然大波 对于信息安全从业者来讲可以称之为 家喻户晓 与之同时引起大家关注的是RASP Runtime application self protection 技术 该技术在2014年Gartner
  • 强化学习奖励函数的归一化

    将每个奖励分量进行归一化 然后再分配权重
  • 9月17日服务器维护,2020年09月17日维护公告

    亲爱的玩家 为了保证服务器的稳定和服务质量 大话西游2免费版 将于2020年09月17日早上8 00停机 进行每周例行的维护工作 维护时间为早上08 00至09 30 同时 本次停机还将发布最新的客户端补丁 patch2 0 824 如果在
  • 从零开始学习JavaScript:轻松掌握编程语言的核心技能③

    从零开始学习JavaScript 轻松掌握编程语言的核心技能 一 JavaScript条件语句 1 1 if Else 语句 1 2 if else if else 语句 1 3 switch 语句 1 4 for 循环 1 5 while
  • 线性插值_c语言实现

    这是个很简单的数学工具 有的问题可能就只需要简单的数学工具就能解决 线性插值 线性插值法 是指使用连接两个已知量的直线来确定在这两个已知量之间的一个未知量的值的方法 线性插值相比其他插值方式 如抛物线插值 具有简单 方便的特点 线性插值可以
  • 基于Zxing的二维码生成和二维码扫描

    最近又在倒腾二维码 发现网上的教程都不够用 所以把之前整合的二维码Demo有拿出来重新添加些功能 这里也算是重新学习吧 当然对于二维码 相信大家都很熟悉了 这里就不多说 本项目是基于Zxing的开源项目开发的 这里用的Demo是之前网上搜的
  • 【计算机组成原理】(四)原码补码的加减乘除

    各种码的作用 模运算的性质 3 1 12 9 9 0 12 9 21 1 12 9 33 2 12 9 15 2 12 9 我们发现等号右边都是 9 相当于等号的左边的数除去12的余数都是9 那我们就说这几个等好左边的数 在mod12的情况
  • 设计模式六大原则(4):接口隔离原则

    定义 客户端不应该依赖它不需要的接口 一个类对另一个类的依赖应该建立在最小的接口上 问题由来 类A通过接口I依赖类B 类C通过接口I依赖类D 如果接口I对于类A和类B来说不是最小接口 则类B和类D必须去实现他们不需要的方法 解决方案 将臃肿
  • Linux Ubuntu 和CentOs 的区别

    几乎所有新手刚接触 Linux 时 都会被它众多的发行版本搞得一头雾水 截至目前 Linux 已经有几百个发行版本 Linux 代表这自由和探索 因为 从技术上来说 Linux 只是一个内核 内核指的是一个提供设备驱动 文件系统 进程管理
  • Qt信号槽及常见问题总结

    Qt4格式 connect m oeThread Live SIGNAL SetImage QImage this SLOT GetImage QImage 带形参类型 Qt5格式 connect graphics QGraphicsVie
  • 第7章_瑞萨MCU零基础入门系列教程之UART

    本教程基于韦东山百问网出的 DShanMCU RA6M5开发板 进行编写 需要的同学可以在这里获取 https item taobao com item htm id 728461040949 配套资料获取 https renesas do
  • Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported

    解决方式一 headers Content Type application json
  • 搭建Vue开发环境以及关闭控制台提示信息(包含vue-devtools安装)

    第一步 到Vue官网上下载开发版本 网页链接 https cn vuejs org v2 guide installation html 将下载的vue js文件拖至新建的vue项目中 第二步 在项目中引入vue js文件 这时运行此网页
  • 如何在iframe内部弹出浮层,浮层遮罩整个浏览器

    需求说明 页面内有多级iframe嵌套 iframe内部某些按钮点击后需要弹出浮层 浮层需要将整个浏览器窗口遮罩 且浮层位于浏览窗口中部 解决思路 顶层页面内预留用于显示浮层的div 命名为popdiv 且该div内有一预留的iframe