HTML实战课堂之启动动画弹窗

 

 

 

一:代码片段讲解

小提示:下面是一个包含启动页和弹窗的完整示例。这个示例包括一个简单的启动页和一个弹窗,当用户点击启动页上的按钮时,会显示弹窗。

 

1. **HTML结构**:

   - `#startPage`:启动页,包含一个标题和一个按钮。

   - `#overlay`:覆盖层,用于在弹窗显示时覆盖整个页面。

   - `#popup`:弹窗,包含一些文本和一个关闭按钮。

 

2. **CSS样式**:

   - 设置基本样式,使启动页居中显示。

   - 设置覆盖层和弹窗的样式,使其居中并添加一些视觉效果。

   - 默认情况下,启动页是可见的,而覆盖层和弹窗是隐藏的。

 

3. **JavaScript代码**:

   - `window.onload`:当页面加载时,显示启动页。

   - `showPopup`函数:隐藏启动页,显示覆盖层和弹窗。

   - `closePopup`函数:隐藏覆盖层和弹窗。

 

二:完整代码

<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>启动页与弹窗示例</title><style>/* 样式 */body {font-family: Arial, sans-serif;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;}#startPage {display: none; /* 默认隐藏 */text-align: center;}#overlay {display: none; /* 默认隐藏 */position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 999;}#popup {display: none; /* 默认隐藏 */position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);padding: 20px;background-color: white;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);z-index: 1000;}button {padding: 10px 20px;font-size: 16px;cursor: pointer;}</style></head><body><!-- 启动页 --><div id="startPage"><h1>欢迎来到我们的网站!</h1><button onclick="showPopup()">点击这里查看弹窗</button></div><!-- 弹窗内容 --><div id="overlay"></div><div id="popup"><h2>这是一个弹窗</h2><p>这是弹窗的内容。</p><button onclick="closePopup()">关闭</button></div><script>// JavaScript 代码window.onload = function() {document.getElementById('startPage').style.display = 'block'; // 显示启动页};function showPopup() {document.getElementById('startPage').style.display = 'none'; // 隐藏启动页document.getElementById('overlay').style.display = 'block'; // 显示覆盖层document.getElementById('popup').style.display = 'block'; // 显示弹窗}function closePopup() {document.getElementById('overlay').style.display = 'none'; // 隐藏覆盖层document.getElementById('popup').style.display = 'none'; // 隐藏弹窗}</script></body></html>```

 

 

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

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

相关文章

GitLab本地服务器配置ssh和克隆项目

1. 本地安装好git git链接&#xff1a;https://git-scm.com/downloads/win 无脑点击下一步安装即可,打开Git Bash命令终端如下&#xff1a; 2. 配置本地用户名和邮箱 git config --global user.name "你的名字" git config --global user.email "你的邮箱&quo…

Unity热更新 之 Addressables(2) 本地/远端打包 流程测试

基础篇&#xff1a;Unity热更新 之 Addressables(1) 资源基础加载-CSDN博客 基础方法来源于唐老狮,我也是初学热更这一块&#xff0c;所有不保证步骤完全正确&#xff0c;如有不足还请斧正 目录 0.前提 1.本地打包 1.1.资源放入包 1.2.简化路径名称给出标签(如有需要的话) …

HDFS架构原理

一、HDFS架构整体概述 HDFS是Hadoop Distribute File System 的简称&#xff0c;意为&#xff1a;Hadoop分布式文件系统。HDFS是Hadoop核心组件之一&#xff0c;作为大数据生态圈最底层的分布式存储服务而存在。HDFS解决的问题就是大数据如何存储,它是横跨在多台计算机上的文件…

图像处理|腐蚀操作

在计算机视觉与图像处理中&#xff0c;腐蚀操作&#xff08;Erosion&#xff09;是形态学操作的一种。形态学操作广泛应用于二值图像中&#xff0c;主要用于分析和提取图像中的结构信息。腐蚀操作是这类操作中最常见的一种&#xff0c;用来对图像进行“收缩”处理&#xff0c;消…

element plus 使用 el-tree 组件设置默认选中和获取所有选中节点id

1. 设置默认选中&#xff1a; 使用 default-checked-keys 属性&#xff0c;设置默认要选中的节点&#xff0c;以数组形式&#xff0c;如下&#xff1a; <el-treeref"treeRef":data"data"show-checkboxnode-key"id":props"defaultProps…

孤独症小孩读正常学校,这些需要了解

在当今社会&#xff0c;随着对孤独症&#xff08;自闭症&#xff09;认知的不断提升&#xff0c;越来越多的家庭开始寻求让孤独症孩子融入主流教育体系的机会。星贝育园康复中心&#xff0c;作为全国规模较大的广泛性发育障碍全托寄宿制儿童康复训练机构&#xff0c;不仅以其专…

头部(Header)

在Ionic框架中&#xff0c;头部&#xff08;Header&#xff09;和底部&#xff08;Footer&#xff09;是重要的UI组件&#xff0c;它们分别固定在屏幕的顶部和底部。 头部&#xff08;Header&#xff09; 头部组件通常用于显示应用程序的标题、副标题和导航按钮。它是应用程序…

Qiskit快速编程探索(进阶篇)

五、量子电路模拟:探索量子世界的虚拟实验室 5.1 Aer模拟器:强大的模拟引擎 在量子计算的探索旅程中,Aer模拟器作为Qiskit的核心组件之一,宛如一座功能强大的虚拟实验室,为开发者提供了在经典计算机上模拟量子电路运行的卓越能力。它打破了硬件条件的限制,使得研究者无…

rust学习——环境搭建

rust安装&#xff1a;https://kaisery.github.io/trpl-zh-cn/ch01-01-installation.html 1、vscode装插件&#xff1a; toml语法支持 依赖管理 rust语法支持 2、创建demo 3、查看目录 4、执行文件的几种方式&#xff1a; rust安装&#xff1a;https://www.rust-lang.org/z…

继承(7)

大家好&#xff0c;今天我们继续来学习一下继承的知识&#xff0c;这方面需要大家勤动脑才能理解&#xff0c;那么我们来看。 1.9 protected关键字 在类和对象章节中&#xff0c;为了实现封装特性,java中引入访向限定符,主要限定:类或者类中成员能否在类外和其他包中被访问. …

玩转大语言模型——langchain调用ollama视觉多模态语言模型

系列文章目录 玩转大语言模型——ollama导入huggingface下载的模型 langchain调用ollama视觉多模态语言模型 系列文章目录前言使用Ollama下载模型查找模型下载模型 测试模型ollama测试langchain测试加载图片加载模型 模型回复 前言 视觉多模态语言模型由预训练的多模态编码器…

J-LangChain - 复杂智能链流式执行

系列文章索引 J-LangChain 入门 介绍 j-langchain是一个Java版的LangChain开发框架&#xff0c;具有灵活编排和流式执行能力&#xff0c;旨在简化和加速各类大模型应用在Java平台的落地开发。它提供了一组实用的工具和类&#xff0c;使得开发人员能够更轻松地构建类似于LangC…

【翻译】2025年华数杯国际赛数学建模题目+翻译pdf自取

保存至本地网盘 链接&#xff1a;https://pan.quark.cn/s/f82a1fa7ed87 提取码&#xff1a;6UUw 2025年“华数杯”国际大学生数学建模竞赛比赛时间于2025年1月11日&#xff08;周六&#xff09;06:00开始&#xff0c;至1月15日&#xff08;周三&#xff09;09:00结束&#xff…

C# GID+绘制不透明和半透明的线条

绘制线条时&#xff0c;必须将 Pen 对象传递给 DrawLine 类的 Graphics 方法。 Pen 构造函数的参数之一是 Color 对象。 若要绘制不透明的线条&#xff0c;请将颜色的 alpha 分量设置为 255。 若要绘制半透明的线条&#xff0c;请将 alpha 分量设置为从 1 到 254 的任何值。 在…

通过可穿戴外骨骼,以更灵活的方式操作你的机器人。

今天&#xff0c;我们将介绍一款专为控制 Mercury X1 和 Mercury B1 机械臂而设计的创新外骨骼。这种外骨骼以人类手臂的结构为蓝本&#xff0c;可实现直观和精确的控制。 开发这种外骨骼的动机源于人们对深度学习和机器学习等领域日益增长的兴趣。这些技术使机器人能够自主学习…

GaussDB分布式数据倾斜处理

常规数据倾斜巡检 在库中表个数少于1W的场景&#xff0c;直接使用倾斜视图查询当前库内所有表的数据倾斜情况 SELECT * FROM pgxc_get_table_skewness ORDER BY totalsize DESC;在库中表个数非常多&#xff08;至少大于1W&#xff09;的场景&#xff0c;因PGXC_GET_TABLE_SKEWN…

浅尝Appium自动化框架

浅尝Appium自动化框架 Appium自动化框架介绍Appium原理Appium使用安装平台驱动实战 坑 Appium自动化框架介绍 Appium 是一个开源的自动化测试框架&#xff0c;最初设计用于移动应用的测试&#xff0c;但现在它也扩展了对桌面端应用的支持。Appium 使得自动化测试变得更加简单&…

day38 tcp 并发 ,linux下的IO模型----IO多路复用

TCP 并发 由于tcp协议只能实现一对一的通信模式。为了实现一对多&#xff0c;有以下的的处理方式 1. 多进程 开销大 效率低 2. 多线程 创建线程需要耗时 3. 线程池 多线程模型创建线程耗时问题&#xff0c;提前创建 4. IO多路复用 在不创建进程和线程的前提下&#xff0c;对…

Kotlin | Android Provider 的实现案例

目标 使用 Android Room 实现持久化库。 代码 Kotlin 代码编写 DemoDatabase&#xff0c;在build生成 DemoDatabase_Impl 疑问 Provider的数据会存在设备吗&#xff1f; 内部存储: 当使用 Room 创建数据库&#xff08;如 DemoDatabase&#xff09;&#xff0c;数据库文件通常…

NFS服务

nfs文件系统 NFS:NetworkFileSystem网络文件系统&#xff0c;基于内核的文件系统。 服务安装 不固定端口启动&#xff0c;会注册到rpcbind&#xff08;固定端口&#xff09;服务上&#xff0c; 局域网适用[rootvm ~]# yum -y install nfs-utils # 依赖安装rpcbind [ro…