当前位置： 首页 > news >正文

点击按钮打开自定义iframe弹窗

news 2025/8/3 1:30:27

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、效果 点击按钮打开弹窗&#xff1a; 打开弹窗后&#xff1a; 2、代码 <!DOCTYPE html> <html><head><title>iframe弹窗</title><style>/* 使用媒体查询来实现响应式设计 */media (min-width: 768px) {.popup {width: 80%; /* 设置…...

编程日记 2024/2/5 11:10:19

LeetCode977 有序数组的平方

暴力解法是平方之后排序复杂度是nnlogn 优化解法是双指针i&#xff0c;j&#xff0c;i放数组首元素位置&#xff0c;j放数组末尾&#xff0c;每次比较i和j位置的数组元素大小&#xff0c;然后挑一个大的放在新的数组元素的指定末尾位置上。 当原始数组nums第一个元素大于零时&a…...

编程日记 2024/2/5 11:09:18

Windows自动化实现：系统通知和任务栏图标自定义

文章目录 Windows自动化的三个小工具系统通知任务栏图标使用pystray实现使用infi.systray实现 Windows自动化的三个小工具 系统通知 import win10toastwin10toast.ToastNotifier().show_toast("eee", "休息一下", icon_path"icon.ico", durati…...

编程日记 2024/2/5 11:08:16

Spring | Spring的“数据库开发“ (Srping JDBC)

目录&#xff1a; Spring JDBC1.Spring JDBC的核心类 ( JdbcTemplate类 )2.Srping JDBC 的配置3.JdbcTemplate类的“常用方法”execute( )&#xff1a;直接执行“sql语句”&#xff0c;没有返回值update( ) &#xff1a;“增删改”&#xff0c;返回 “影响的行数”query( ) : “…...

编程日记 2024/2/5 11:06:13

面试八股文（2）

文章目录 1.ArrayList和LinkedList区别2.HashMap和HashTable区别3.线程的创建方式4.Java中异常处理5.Java序列化中某些字段不想进行序列化&#xff1f;6.Java序列化7.静态方法和实例方法8.List、Set、Map三者区别9.ArrayList和Vector区别10.HashMap和HashSet区别 1.ArrayList和…...

编程日记 2024/2/5 11:03:10

记elasticsearch CPU负载100%问题

记elasticsearch CPU负载100%问题 环境&#xff1a;问题表现&#xff1a;初步排查&#xff1a;日志查询hot_thread 深入查询当前elasticsearch正在运行的Task查看Task详情解决问题对导致问题的原因的几个猜测问题复现&#xff1a;导致问题的原因。json导入规则问题json导入规则…...

编程日记 2024/2/5 11:02:09

回归预测 | Matlab实现OOA-CNN-LSTM-Attention鱼鹰算法优化卷积长短期记忆网络注意力多变量回归预测（SE注意力机制）

回归预测 | Matlab实现OOA-CNN-LSTM-Attention鱼鹰算法优化卷积长短期记忆网络注意力多变量回归预测&#xff08;SE注意力机制&#xff09; 目录 回归预测 | Matlab实现OOA-CNN-LSTM-Attention鱼鹰算法优化卷积长短期记忆网络注意力多变量回归预测&#xff08;SE注意力机制&…...

编程日记 2024/2/5 10:57:02

PyTorch、NCNN、CV::Mat三者张量的shape

目录 一、PyTorch二、NCNN三、CV::Mat 一、PyTorch 在 PyTorch 中&#xff0c;张量&#xff08;Tensor&#xff09;的形状通常按照 (N, C, H, W) 的顺序排列&#xff0c;其中&#xff1a; N 是批量大小&#xff08;batch size&#xff09; C 是通道数&#xff08;channel numb…...

编程日记 2024/2/5 10:55:59

社交平台内容创作未来会有哪些方向？

内容为王的时代下&#xff0c;企业如果想要通过社交平台占据用户心智&#xff0c;可以找到适合自己的内容营销策略&#xff0c;好的内容能够与消费者建立信任关系&#xff0c;今天 媒介盒子就来和大家聊聊&#xff1a;社交平台内容创作的方向。 一、 内容逐渐细分 相比于原来…...

编程日记 2024/2/5 10:52:56

MySQL温故篇（一）SQL语句基础

一、SQL语句基础 1、SQL语言分类 DDL&#xff1a;数据定义语言 DCL&#xff1a;数据控制语言 DML&#xff1a;数据操作语言 DQL&#xff1a;数据的查询语言 2、数据类型 3、字符类型 char(11) &#xff1a; 定长 的字符串类型,在存储字符串时&#xff0c;最大字符长度11个&a…...

编程日记 2024/2/5 10:45:49

C 检查小端存储还是大端

#include <stdio.h>int main() {unsigned int i 1;char *c (char*)&i;if (*c) printf("小端字节序\n");elseprintf("大端字节序\n");return 0; }该程序就是利用了强转舍弃 我们首先定义了一个无符号整数i并将其初始化为1。然后&#xff0c;…...

编程日记 2024/2/5 10:44:48

【ETOJ P1021】树的遍历 题解（有向图+深度优先搜索+广度优先搜索）

题目描述 给定一棵大小为 n n n&#xff0c;根为 1 1 1 的树&#xff0c;求出其按照 dfs 和 bfs 进行遍历时的顺序。 请将所有出点按照编号从小到大排序后进行遍历。 dfs 为深度优先搜索&#xff0c;bfs 为宽度优先搜索。 输入格式 一个整数 n n n&#xff0c;表示点的…...

编程日记 2024/2/5 10:43:47

红队渗透靶机: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)-[~…...

编程日记 2024/2/5 10:42:46

【Servlet】——Servlet API 详解

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【Servlet】 本专栏旨在分享学习Servlet的一点学习心得&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 一、HttpServlet二、Htt…...

编程日记 2024/2/5 10:39:43

oracle主库增加redo组数

redo log&#xff08;重做日志&#xff09;&#xff1a; 重做日志&#xff1a;简单来说就是&#xff0c;将oracle数据库的DML、DDL&#xff08;数据库操作语言&#xff0c;数据库定义i语言&#xff09;操作记录在日志中&#xff0c;方便恢复及备库使用&#xff0c;以组的方式管…...

编程日记 2024/2/5 10:36:41

lua只读表

参考《programming in lua》13.4.5中&#xff0c;详细介绍了只读表的用法。建立一个函数&#xff0c;传入一个table&#xff0c;传出一个代理table&#xff0c;其__index指向传入的table&#xff0c;__newIndex直接报error即可&#xff1a; --输入一个table&#xff0c;输出一…...

编程日记 2024/2/5 10:35:40

探索深度学习的边界：使用 TensorFlow 实现高效空洞卷积（Atrous Convolution）的全面指南

空洞卷积&#xff08;Atrous Convolution&#xff09;&#xff0c;在 TensorFlow 中通过 tf.nn.atrous_conv2d 函数实现&#xff0c;是一种强大的工具&#xff0c;用于增强卷积神经网络的功能&#xff0c;特别是在处理图像和视觉识别任务时。这种方法的核心在于它允许网络以更高…...

编程日记 2024/2/5 10:33:38

HarmonyOS案例：摇杆游戏

本案例主要演示如何通过一系列的动画效果以及运算实现摇杆控制组件同步运动的功能&#xff0c;界面简陋无需在意。 欢迎大家的阅读和评价&#xff0c;也欢迎大佬们批评、指正&#xff0c;我将继续努力&#xff0c;奉上更加专业的、高效的代码案例。 import curves from ohos.c…...

编程日记 2024/2/5 10:31:36

Elasticsearch：构建自定义分析器指南

在本博客中&#xff0c;我们将介绍不同的内置字符过滤器、分词器和分词过滤器&#xff0c;以及如何创建适合我们需求的自定义分析器。更多关于分析器的知识&#xff0c;请详细阅读文章&#xff1a; 开始使用 Elasticsearch &#xff08;3&#xff09; Elasticsearch: analyzer…...

编程日记 2024/2/5 10:30:34

Git系列---远程操作

&#x1f4d9; 作者简介 &#xff1a;RO-BERRY &#x1f4d7; 学习方向&#xff1a;致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f4d2; 日后方向 : 偏向于CPP开发以及大数据方向&#xff0c;欢迎各位关注&#xff0c;谢谢各位的支持 引用 1.理解分布式版本控制…...

编程日记 2024/2/5 10:29:34

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

编程新知 2025/7/12 6:45:46

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

编程新知 2025/8/2 17:02:21

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/6/15 19:02:54

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/6/17 3:13:49

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

编程新知 2025/8/1 5:05:06

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

编程新知 2025/7/7 7:20:27

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/7/23 19:14:14

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/7/8 23:32:56

虚拟电厂发展三大趋势：市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

编程新知 2025/8/3 1:06:36

【MATLAB代码】基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），针对传感器观测数据中存在的脉冲型异常噪声问题，通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现，验证了后者在状态估计鲁棒性方面的显著优…...

编程新知 2025/8/2 0:44:23