点击按钮打开自定义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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/667160.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【c/python】GtkBox

一、GtkBox及C语言示例 GtkBox是一个容器部件&#xff0c;用于在GTK&#xff08;GIMP Toolkit&#xff09;应用程序中水平或垂直地排列多个子部件。以下是一个简单的例子&#xff0c;展示了如何在一个基本的GTK应用程序中使用GtkBox来垂直排列两个按钮&#xff1a; 首先&#…

用Python Tkinter打造的精彩连连看小游戏【附源码】

文章目录 连连看小游戏&#xff1a;用Python Tkinter打造的精彩游戏体验游戏简介技术背景MainWindow类:职责:方法:Point类: 主执行部分:完整代码&#xff1a;总结&#xff1a; 连连看小游戏&#xff1a;用Python Tkinter打造的精彩游戏体验 在丰富多彩的游戏世界中&#xff0c…

左旋字符串的三种方法,并判断一个字符串是否为另外一个字符串旋转之后的字符串。(strcpy,strncat,strcmp,strstr函数的介绍)

一. 实现一个函数&#xff0c;可以左旋字符串中的k个字符。 例如&#xff1a; ABCD左旋一个字符得到BCDA ABCD左旋两个字符得到CDAB 通过分析&#xff0c;可以知道实际的旋转次数&#xff0c;其实是k%&#xff08;字符串长度&#xff09;。假设一个字…

西瓜书学习笔记——流形学习(公式推导+举例应用)

文章目录 等度量映射&#xff08;仅保留点与其邻近点的距离&#xff09;算法介绍实验分析 局部线性嵌入&#xff08;不仅保留点与其邻近点的距离还要保留邻近关系&#xff09;算法介绍实验分析 等度量映射&#xff08;仅保留点与其邻近点的距离&#xff09; 算法介绍 等度量映…

树莓派5一键安装C++版本OpenCV

安装环境 本人当前的安装环境&#xff1a; 树莓派5Raspberry Pi os (64-bit) Debian12 Bookworm 镜像下载地址 我这里是将镜像安装好后直接安装opencv&#xff0c;如果不是刚安装好的镜像需要注意是否有openCV的python之类的安装过&#xff0c;不然可能出现编译错误 一、扩展内…

SpringBoot中数据库的连接及Mybatis的配置和使用

目录 1 在pom.xml中引入相关依赖 2 对数据库进行配置 2.1 配置application.yml 2.2 idea连接数据库 (3.2.1有用到) 3 Mybatis的使用 3.1 测试文件的引入 3.2 使用 3.2.1 使用注解(有小技巧(✪ω✪)) 3.2.2 使用动态sql 1 在pom.xml中引入相关依赖 <dependencies&g…

海外多语言盲盒开发:打破语言障碍,连接全球消费者

随着全球化的加速和互联网的普及&#xff0c;语言障碍成为了影响跨国交流和商业活动的重要因素。为了满足跨国市场的需求&#xff0c;海外多语言盲盒开发成为了一个新兴的领域。本文将探讨海外多语言盲盒开发的意义、现状和未来发展。 一、海外多语言盲盒开发的意义 在全球化…

RedHat8.4安装邮件服务器

一、配置发件服务器 1.1 根据现场IP&#xff0c;配置主机名 vim /etc/hosts 192.168.8.120 mail.test.com 将主机名更改为邮件服务器域名mail.test.com 1.2 关闭防火墙&#xff0c;禁止开机启动 systemctl stop firewalld systemctl disable firewalld 1.3 关闭selinux v…

基于springboot就业信息管理系统源码和论文

随着信息化时代的到来&#xff0c;管理系统都趋向于智能化、系统化&#xff0c;就业信息管理系统也不例外&#xff0c;但目前国内仍都使用人工管理&#xff0c;市场规模越来越大&#xff0c;同时信息量也越来越庞大&#xff0c;人工管理显然已无法应对时代的变化&#xff0c;而…

InnoDB 锁系统(小白入门)

1995年 &#xff0c;MySQL 1.0发布&#xff0c;仅供内部使用&#xff01; 开发多用户、数据库驱动的应用时&#xff0c;最大的一个难点是&#xff1a;一方面要最大程度地利用数据库的并发访问&#xff0c;另一方面还要确保每个用户能以一致性的方式读取和修改数据。 MVCC 并发…

基于python+控制台的员工信息管理系统

基于python控制台的员工信息管理系统 一、系统介绍二、效果展示三、其他系统实现四、获取源码 一、系统介绍 1.添加职工数据 2.显示职工数据 3.查询职工数据 4.修改职工数据 5.删除职工数据 6.保存职工数据 7.排序职工数据 8.统计职工工资数据 9.退出 二、效果展示 三、其他系…

从搜索引擎到答案引擎:LLM驱动的变革

在过去的几周里&#xff0c;我一直在思考和起草这篇文章&#xff0c;认为谷歌搜索正处于被颠覆的边缘&#xff0c;它实际上可能会影响 SEO 作为业务牵引渠道的可行性。 考虑到谷歌二十多年来的完全统治地位&#xff0c;以及任何竞争对手都完全无力削弱它&#xff0c;坦率地说&…

CSS transition(过渡效果)详解并附带示例

CSS过渡效果&#xff08;CSS transitions&#xff09;是一种在元素属性值发生变化时&#xff0c;通过指定过渡效果来实现平滑的动画效果的方法。通过定义起始状态和结束状态之间的过渡属性&#xff0c;可以使元素的变化更加流畅和可视化。 过渡效果的基本语法如下&#xff1a;…

乐意购项目前端开发 #6

一、商品详情页面 代码模版 创建Detail文件夹, 然后创建index.vue文件 <script setup> import { getDetail } from "/api/goods/index"; import { ref, onMounted } from "vue"; import { useRoute } from "vue-router"; import { useCar…

SpringBoot 登录检验JWT令牌 生成与校验

JWT官网 https://jwt.io/ 引入依赖 <dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>0.9.1</version> </dependency>设置过期时间 LocalDateTime localDateTime LocalDateTime.now().…

STM32--SPI通信协议(1)SPI基础知识总结

前言 I2C (Inter-Integrated Circuit)和SPI (Serial Peripheral Interface)是两种常见的串行通信协议&#xff0c;用于连接集成电路芯片之间的通信&#xff0c;选择I2C或SPI取决于具体的应用需求。如果需要较高的传输速度和简单的接口&#xff0c;可以选择SPI。如果需要连接多…

css1字体属性

一.font-family(字体系列&#xff09; 不同字体系统用&#xff0c;隔开&#xff1b; 多个字母的字体系统用“”&#xff1b; 二.font-size&#xff08;字体大小&#xff09;&#xff08;有单位px&#xff09;&#xff08;默认字体16px&#xff09; 三.font-weight&#xff08…

Leetcode—535. TinyURL 的加密与解密【中等】

2024每日刷题&#xff08;110&#xff09; Leetcode—535. TinyURL 的加密与解密 实现代码 class Solution { public:// Encodes a URL to a shortened URL.string encode(string longUrl) {while(!urlToCode.count(longUrl)) {string code;for(int i 0; i < 6; i) {code…

Blender使用Rigify和Game Rig Tool基础

做动画需要的几个简要步骤&#xff1a; 1.建模 2.绑定骨骼 3.绘制权重 4.动画 1.Rigify是干嘛用的&#xff1f; 》 绑定骨骼 2.Game Rig Tool干嘛用的&#xff1f; 》 修复Rigify绑定骨骼做的动画导入游戏引擎的问题&#xff0c;如果Rigify自身修复了就不需要这个插件了&#…

Python算法100例-1.2 兔子产子

完整源代码项目地址&#xff0c;关注博主私信’源代码’后可获取 1&#xff0e;问题描述 有一对兔子&#xff0c;从出生后的第3个月起每个月都生一对兔子。小兔子长到第3个月后每个月又生一对兔子&#xff0c;假设所有的兔子都不死&#xff0c;问30个月内每个月的兔子总对数为…