创建简单自适应弹窗教程-网站弹窗2.0版本

heylie

2024-03-08 / 0 评论 / 122 阅读 / 正在检测是否收录...

03/08

温馨提示：

本文最后更新于2024年05月08日，已超过197天没有更新，若内容或图片失效，请留言反馈。

本文由 故渊渡、阿里-通义千问 编写，旨在分享一种基于HTML、CSS创建简单自适应弹窗的方法。该弹窗将在网页加载后显示，可根据设备屏幕大小（电脑端、平板端、手机端）自动调整样式，适用于各种网页应用和场景。

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="web_notice.css">
    <title>自适应弹窗实例 - by [Your Name] @ blog.heylie.cn</title>
</head>
<body>
    <!-- 弹窗内容 -->
    <div class="web_notice">
        <div>
            <h3>网站通知</h3>
            <div>欢迎来到故渊渡</div>
            <a onclick='document.querySelector(".web_notice").remove()'>已知</a>
        </div>
    </div>
</body>
</html>

CSS 样式 (web_blog_heylie_cn.css)

/* 基础样式，所有设备共享 */

.web_notice {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

overflow-y: auto; /* 添加滚动条，以防内容超出视口 */

z-index: 99999;

}


.web_notice > div {

max-width: 550px; /* 最大宽度，便于响应式设计 */

background: #fff;

border-radius: 40px;

padding: 50px 40px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 示例增加阴影效果 */

}

.web_notice h3 {
font-weight: 700;
text-align: center;
font-size: 30px;
}

.web_notice div[style*="color:#999"] {
font-size: 16px;
line-height: 30px;
color: #999;
}

.web_notice a {
display: block;
background: #98a3ff;
color: #fff;
text-align: center;
font-weight: 700;
font-size: 19px;
line-height: 60px;
margin: 20px auto;
border-radius: 32px;
padding: 10px 30px;
width: fit-content;
}

/* ...其它基础样式... */

/* 响应式设计 */
/* ...电脑端、平板端、手机端媒体查询... */

教程说明

在此教程中，我们为弹窗组件赋予了“web_notice”类名，并在加载文档后通过JavaScript显示在屏幕中央。弹窗的实际内容可以根据需求进行填充，例如用户浏览器信息、IP地址和时间问候等。通过CSS媒体查询实现不同设备上的自适应布局，确保弹窗始终保持在屏幕中心并适配屏幕大小。

感谢访问 [故渊渡] 的个人博客：blog.heylie.cn，更多相关教程和技术分享敬请关注！

注：本示例未涵盖获取用户浏览器信息、IP地址和实时时间的具体实现细节，这部分需要结合实际应用场景和可用资源进行开发。此外，点击关闭按钮时，弹窗通过添加CSS类 .hidden 实现隐藏效果。