<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS Modal</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<a href="#modal-opened" class="link-1" id="modal-closed">打开窗口</a>
<div class="modal-container" id="modal-opened">
<div class="modal">
<div class="modal__details">
<h1 class="modal__title">模态框标题</h1>
<p class="modal__description">一个句子,它将告诉用户这个模式是用来做什么的。</p>
</div>
<p class="modal__text">模态框介绍,正文内容,任意填写。</p>
<button class="modal__btn">查看跟多 →</button>
<a href="#modal-closed" class="link-2"></a>
</div>
</div>
<div style="text-align:center;margin:100px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>更多源码:<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p>
</div>
</body>
</html>
CSS3点击打开模态框窗口特效.zip
版权申诉
13 浏览量
2023-10-14
23:57:31
上传
评论
收藏 2KB ZIP 举报
码云笔记
- 粉丝: 2w+
- 资源: 5851
最新资源
- Python 手写实现 iD3 决策树算法-根据信息增益公式.zip
- 411675952289057车联助手-小窗版(三星)3.5.1.apk
- 三种快速排序方法合并在一个文件中以便直接运行的Python代码示例
- 937712277954201实习5.word
- 2程序语言基础知识pdf1_1716337722703.jpeg
- 简单的Python示例,演示了如何使用TCP/IP协议进行基本的客户端和服务器通信
- 考试.sql
- keil2 + proteus + 8051.exe
- 1961ee27df03bd4595d28e24b00dde4e_744c805f7e4fb4d40fa3f695bfbab035_8(1).c
- mediapipe-0.9.0.1-cp37-cp37m-win-amd64.whl.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈