点击按钮打开自定义iframe弹窗
1、效果
点击按钮打开弹窗：
打开弹窗后：
2、代码
<!DOCTYPE html>
<html><head><title>iframe弹窗</title><style>/* 使用媒体查询来实现响应式设计 */@media (min-width: 768px) {.popup {width: 80%; /* 设置弹窗宽度为80% */height: 80%; /* 设置弹窗高度为80% */}}@media (max-width: 767px) {.popup {width: 90%; /* 设置弹窗宽度为90% */height: 90%; /* 设置弹窗高度为90% */}}.overlay {position: fixed; /* 设置定位为固定定位 */top: 0; /* 距离顶部为0 */left: 0; /* 距离左侧为0 */width: 100%; /* 宽度为100% */height: 100%; /* 高度为100% */background-color: rgba(0, 0, 0, 0.5); /* 背景颜色为半透明黑色 */z-index: 9998; /* 设置层级 */display: none; /* 初始隐藏 */}.popup {position: fixed; /* 设置定位为固定定位 *//* 使用 flexbox 布局来使弹窗居中 */top: 0; /* 距离顶部为0 */left: 0; /* 距离左侧为0 */right: 0; /* 距离右侧为0 */bottom: 0; /* 距离底部为0 */margin: auto; /* 居中 *//* 添加一些样式来增加美观性和可读性 */background-color: #fff; /* 背景颜色为白色 */box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */border-radius: 10px; /* 设置圆角 */z-index: 9999; /* 设置层级 */display: none; /* 初始隐藏 *//* 添加一个动画效果来增加活力和吸引力 */animation: fadeIn 0.5s; /* 使用fadeIn动画，时长0.5秒 */}/* 定义一个淡入的动画 */@keyframes fadeIn {from {opacity: 0; /* 从透明度0开始 */}to {opacity: 1; /* 渐变到透明度1 */}}.close-button {position: absolute; /* 设置定位为绝对定位 */top: 10px; /* 距离顶部10像素 */right: 10px; /* 距离右侧10像素 */width: 30px; /* 宽度为30像素 */height: 30px; /* 高度为30像素 */border: none; /* 去除边框 */background-color: transparent; /* 背景透明 */cursor: pointer; /* 鼠标指针为手型 */}.close-button:hover {transform: scale(1.1); /* 鼠标悬停时放大1.1倍 */}.close-button:active {transform: scale(0.9); /* 鼠标点击时缩小0.9倍 */}.close-icon {width: 100%; /* 宽度100% */height: 100%; /* 高度100% */}.iframe-container {width: 100%; /* 宽度100% */height: 100%; /* 高度100% */overflow: hidden; /* 隐藏溢出内容 */}.iframe-content {width: 100%; /* 宽度100% */height: 100%; /* 高度100% */border: none; /* 去除边框 */}.close-icon {width: 30px; /* 宽度30像素 */height: 30px; /* 高度30像素 */background-color: white; /* 背景颜色为白色 */border-radius: 50%; /* 设置圆角 */display: flex; /* 使用flex布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */}.close-icon::after {content: "X"; /* 内容为X */}.button-open {padding: 10px 20px; /* 上下内边距10像素，左右内边距20像素 */border: none; /* 去除边框 */background-color: #0078d4; /* 背景颜色为蓝色 */color: white; /* 文字颜色为白色 */font-size: 16px; /* 字体大小为16像素 */border-radius: 5px; /* 设置圆角 */cursor: pointer; /* 鼠标指针为手型 */position: absolute; /* 设置定位为绝对定位 *//* 使用 flexbox 布局来使按钮居中 */top: 0; /* 距离顶部为0 */left: 0; /* 距离左侧为0 */right: 0; /* 距离右侧为0 */bottom: 0; /* 距离底部为0 */margin: auto; /* 居中 */width: 150px; /* 按钮的宽度为150像素 */height: 50px; /* 按钮的高度为50像素 */}</style>
</head><body><button onclick="openPopup()" class='button-open'>打开弹窗</button><div class="overlay" id="overlay" onclick="closePopup()"></div><div class="popup" id="popup"><button class="close-button" onclick="closePopup()"><div class="close-icon"></div></button><div class="iframe-container"><iframe class="iframe-content" id="popupContent" src="https://www.example.com" loading="lazy"sandbox="allow-same-origin allow-scripts" referrerPolicy="no-referrer"></iframe></div></div><script>function openPopup() {var overlay = document.getElementById("overlay");var popup = document.getElementById("popup");var popupContent = document.getElementById("popupContent");popupContent.src = "https://bing.com"; // 替换为您想要显示的弹窗内容的URLoverlay.style.display = "block"; // 显示遮罩层popup.style.display = "block"; // 显示弹窗}function closePopup() {var overlay = document.getElementById("overlay");var popup = document.getElementById("popup");overlay.style.display = "none"; // 隐藏遮罩层popup.style.display = "none"; // 隐藏弹窗}</script></body></html>
相关文章：
点击按钮打开自定义iframe弹窗
1、效果 点击按钮打开弹窗： 打开弹窗后： 2、代码 <!DOCTYPE html> <html><head><title>iframe弹窗</title><style>/* 使用媒体查询来实现响应式设计 */media (min-width: 768px) {.popup {width: 80%; /* 设置…...
LeetCode977 有序数组的平方
暴力解法是平方之后排序复杂度是nnlogn 优化解法是双指针i，j，i放数组首元素位置，j放数组末尾，每次比较i和j位置的数组元素大小，然后挑一个大的放在新的数组元素的指定末尾位置上。 当原始数组nums第一个元素大于零时&a…...
Windows自动化实现：系统通知和任务栏图标自定义
文章目录 Windows自动化的三个小工具系统通知任务栏图标使用pystray实现使用infi.systray实现 Windows自动化的三个小工具 系统通知 import win10toastwin10toast.ToastNotifier().show_toast("eee", "休息一下", icon_path"icon.ico", durati…...
Spring | Spring的“数据库开发“ (Srping JDBC)
目录： Spring JDBC1.Spring JDBC的核心类 ( JdbcTemplate类 )2.Srping JDBC 的配置3.JdbcTemplate类的“常用方法”execute( )：直接执行“sql语句”，没有返回值update( ) ：“增删改”，返回 “影响的行数”query( ) : “…...
面试八股文（2）
文章目录 1.ArrayList和LinkedList区别2.HashMap和HashTable区别3.线程的创建方式4.Java中异常处理5.Java序列化中某些字段不想进行序列化？6.Java序列化7.静态方法和实例方法8.List、Set、Map三者区别9.ArrayList和Vector区别10.HashMap和HashSet区别 1.ArrayList和…...
记elasticsearch CPU负载100%问题
记elasticsearch CPU负载100%问题 环境：问题表现：初步排查：日志查询hot_thread 深入查询当前elasticsearch正在运行的Task查看Task详情解决问题对导致问题的原因的几个猜测问题复现：导致问题的原因。json导入规则问题json导入规则…...
回归预测 | Matlab实现OOA-CNN-LSTM-Attention鱼鹰算法优化卷积长短期记忆网络注意力多变量回归预测（SE注意力机制）
回归预测 | Matlab实现OOA-CNN-LSTM-Attention鱼鹰算法优化卷积长短期记忆网络注意力多变量回归预测（SE注意力机制） 目录 回归预测 | Matlab实现OOA-CNN-LSTM-Attention鱼鹰算法优化卷积长短期记忆网络注意力多变量回归预测（SE注意力机制&…...
PyTorch、NCNN、CV::Mat三者张量的shape
目录 一、PyTorch二、NCNN三、CV::Mat 一、PyTorch 在 PyTorch 中，张量（Tensor）的形状通常按照 (N, C, H, W) 的顺序排列，其中： N 是批量大小（batch size） C 是通道数（channel numb…...
社交平台内容创作未来会有哪些方向？
内容为王的时代下，企业如果想要通过社交平台占据用户心智，可以找到适合自己的内容营销策略，好的内容能够与消费者建立信任关系，今天 媒介盒子就来和大家聊聊：社交平台内容创作的方向。 一、 内容逐渐细分 相比于原来…...
MySQL温故篇（一）SQL语句基础
一、SQL语句基础 1、SQL语言分类 DDL：数据定义语言 DCL：数据控制语言 DML：数据操作语言 DQL：数据的查询语言 2、数据类型 3、字符类型 char(11) ： 定长 的字符串类型,在存储字符串时，最大字符长度11个&a…...
C 检查小端存储还是大端
#include <stdio.h>int main() {unsigned int i 1;char *c (char*)&i;if (*c) printf("小端字节序\n");elseprintf("大端字节序\n");return 0; }该程序就是利用了强转舍弃 我们首先定义了一个无符号整数i并将其初始化为1。然后，…...
【ETOJ P1021】树的遍历 题解（有向图+深度优先搜索+广度优先搜索）
题目描述 给定一棵大小为 n n n，根为 1 1 1 的树，求出其按照 dfs 和 bfs 进行遍历时的顺序。 请将所有出点按照编号从小到大排序后进行遍历。 dfs 为深度优先搜索，bfs 为宽度优先搜索。 输入格式 一个整数 n n n，表示点的…...
红队渗透靶机:LEMONSQUEEZY: 1
目录 信息收集 1、arp 2、nmap 3、nikto 4、whatweb 目录扫描 1、dirsearch 2、gobuster WEB phpmyadmin wordpress wpscan 登录wordpress 登录phpmyadmin 命令执行 反弹shell 提权 get user.txt 信息收集 本地提权 信息收集 1、arp ┌──(root㉿ru)-[~…...
【Servlet】——Servlet API 详解
个人主页：兜里有颗棉花糖 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 兜里有颗棉花糖 原创 收录于专栏【Servlet】 本专栏旨在分享学习Servlet的一点学习心得，欢迎大家在评论区交流讨论💌 目录 一、HttpServlet二、Htt…...
oracle主库增加redo组数
redo log（重做日志）： 重做日志：简单来说就是，将oracle数据库的DML、DDL（数据库操作语言，数据库定义i语言）操作记录在日志中，方便恢复及备库使用，以组的方式管…...
lua只读表
参考《programming in lua》13.4.5中，详细介绍了只读表的用法。建立一个函数，传入一个table，传出一个代理table，其__index指向传入的table，__newIndex直接报error即可： --输入一个table，输出一…...
探索深度学习的边界：使用 TensorFlow 实现高效空洞卷积（Atrous Convolution）的全面指南
空洞卷积（Atrous Convolution），在 TensorFlow 中通过 tf.nn.atrous_conv2d 函数实现，是一种强大的工具，用于增强卷积神经网络的功能，特别是在处理图像和视觉识别任务时。这种方法的核心在于它允许网络以更高…...
HarmonyOS案例：摇杆游戏
本案例主要演示如何通过一系列的动画效果以及运算实现摇杆控制组件同步运动的功能，界面简陋无需在意。 欢迎大家的阅读和评价，也欢迎大佬们批评、指正，我将继续努力，奉上更加专业的、高效的代码案例。 import curves from ohos.c…...
Elasticsearch：构建自定义分析器指南
在本博客中，我们将介绍不同的内置字符过滤器、分词器和分词过滤器，以及如何创建适合我们需求的自定义分析器。更多关于分析器的知识，请详细阅读文章： 开始使用 Elasticsearch （3） Elasticsearch: analyzer…...
Git系列---远程操作
📙 作者简介 ：RO-BERRY 📗 学习方向：致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 📒 日后方向 : 偏向于CPP开发以及大数据方向，欢迎各位关注，谢谢各位的支持 引用 1.理解分布式版本控制…...
超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应，这是一种非线性光学现象，主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场，对材料产生非线性响应，可能…...
Java 8 Stream API 入门到实践详解
一、告别 for 循环！ 传统痛点： Java 8 之前，集合操作离不开冗长的 for 循环和匿名类。例如，过滤列表中的偶数： List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...
Python爬虫实战：研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中，新增了一个本地验证码接口 /code，使用函数式路由（RouterFunction）和 Hutool 的 Circle…...
Android第十三次面试总结（四大 组件基础）
Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成，用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机： onCreate() 调用时机：Activity 首次创建时调用。…...
Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？
在大数据处理领域，Hive 作为 Hadoop 生态中重要的数据仓库工具，其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式，很多开发者常常陷入选择困境。本文将从底…...
基于TurtleBot3在Gazebo地图实现机器人远程控制
1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...
【Go语言基础【12】】指针：声明、取地址、解引用
文章目录 零、概述：指针 vs. 引用（类比其他语言）一、指针基础概念二、指针声明与初始化三、指针操作符1. &：取地址（拿到内存地址）2. *：解引用（拿到值） 四、空指针&am…...
C++.OpenGL （20/64）混合（Blending）
混合（Blending） 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...
【Linux手册】探秘系统世界：从用户交互到硬件底层的全链路工作之旅
目录 前言 操作系统与驱动程序 是什么，为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中，我们在使用电子设备时，我们所输入执行的每一条指令最终大多都会作用到硬件上，比如下载一款软件最终会下载到硬盘上&am…...