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

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

news 2026/2/9 16:30:10

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%; /* 设置…...

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

LeetCode977 有序数组的平方

暴力解法是平方之后排序复杂度是nnlogn 优化解法是双指针i，j，i放数组首元素位置，j放数组末尾，每次比较i和j位置的数组元素大小，然后挑一个大的放在新的数组元素的指定末尾位置上。当原始数组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)

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

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

面试八股文（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和…...

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

记elasticsearch CPU负载100%问题

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

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

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

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

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

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

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

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

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

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

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

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

一、SQL语句基础 1、SQL语言分类 DDL：数据定义语言 DCL：数据控制语言 DML：数据操作语言 DQL：数据的查询语言 2、数据类型 3、字符类型 char(11) ： 定长的字符串类型,在存储字符串时，最大字符长度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。然后，…...

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

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

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

编程日记 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 详解

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

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

oracle主库增加redo组数

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

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

lua只读表

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

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

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

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

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

HarmonyOS案例：摇杆游戏

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

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

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

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

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

Git系列---远程操作

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

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

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2026/2/8 20:43:07

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统：ubuntu22.04 IDE:Visual Studio Code 编程语言：C11 题目描述地上有一个 m 行 n 列的方格，从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子，但不能进入行坐标和列坐标的数位之和大于 k 的格子。例…...

编程新知 2026/1/10 10:16:16

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 （一）概念解析 TRS（Total Return Swap）收益互换是一种金融衍生工具，指交易双方约定在未来一定期限内，基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/11/2 0:31:23

【HTTP三个基础问题】

面试官您好！HTTP是超文本传输协议，是互联网上客户端和服务器之间传输超文本数据（比如文字、图片、音频、视频等）的核心协议，当前互联网应用最广泛的版本是HTTP1.1，它基于经典的C/S模型，也就是客…...

编程新知 2025/12/10 6:18:55

图表类系列各种样式PPT模版分享

图标图表系列PPT模版，柱状图PPT模版，线状图PPT模版，折线图PPT模版，饼状图PPT模版，雷达图PPT模版，树状图PPT模版图表类系列各种样式PPT模版分享：图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2026/2/4 18:07:02

三分算法与DeepSeek辅助证明是单峰函数

前置单峰函数有唯一的最大值，最大值左侧的数值严格单调递增，最大值右侧的数值严格单调递减。单谷函数有唯一的最小值，最小值左侧的数值严格单调递减，最小值右侧的数值严格单调递增。三分的本质三分和二分一样都是通过不断缩…...

编程新知 2026/1/31 2:50:32

计算机基础知识解析：从应用到架构的全面拆解

目录前言 1、计算机的应用领域：无处不在的数字助手 2、计算机的进化史：从算盘到量子计算 3、计算机的分类：不止 “台式机和笔记本” 4、计算机的组件：硬件与软件的协同 4.1 硬件：五大核心部件 4.2 软件&#…...

编程新知 2026/1/31 9:44:27

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录正整数到Excel编号之间的转换正整数到Excel编号之间的转换 excel的列编号是这样的：a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...

编程新知 2025/8/31 2:33:30

DBLP数据库是什么？

DBLP（Digital Bibliography & Library Project）Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高，数据库文献更新速度很快，很好地反映了国际计算机科学学术研…...

编程新知 2026/2/4 20:54:56

实战设计模式之模板方法模式

概述模板方法模式定义了一个操作中的算法骨架，并将某些步骤延迟到子类中实现。模板方法使得子类可以在不改变算法结构的前提下，重新定义算法中的某些步骤。简单来说，就是在一个方法中定义了要执行的步骤顺序或算法框架，但允许子类…...

编程新知 2026/1/26 23:42:12

1、效果

2、代码

相关文章：