创建简单自适应弹窗教程-网站弹窗2.0版本
创建简单自适应弹窗教程-网站弹窗2.0版本
2024-03-08 0 评论 114 阅读 1 点赞

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

heylie
2024-03-08 / 0 评论 / 114 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2024年05月08日,已超过148天没有更新,若内容或图片失效,请留言反馈。

本文由 故渊渡阿里-通义千问 编写,旨在分享一种基于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 实现隐藏效果。

1

我来讲讲 (0)

取消