创建自适应弹窗 v2.1：整合用户浏览器信息、IP地址与实时问候

heylie

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

03/25

温馨提示：

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

在这篇文章中，我们将详细介绍如何运用HTML、CSS及JavaScript技术构建一个高度自适应的弹窗组件，该组件会在网页加载后显示，并能根据不同设备屏幕大小（如电脑端、平板端、手机端）自动调整样式。同时，我们会集成用户浏览器信息、IP地址和实时问候的功能，增强用户体验。

效果图

第一步：HTML结构设置

首先，我们定义弹窗的基本HTML结构，包含标题、内容区域以及关闭按钮：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自适应弹窗实例 v2.1 - by [Your Name] @ blog.heylie.cn</title>
    <!-- 内联 CSS 用于简洁演示，实际项目中建议外部引用 -->
    <style>
        /* 在此处添加通用及响应式CSS样式 */
    </style>
</head>
<body>
    <!-- 弹窗元素 -->
    <div class="web_notice" id="user_info_popup">
        <div>
            <h3>网站通知</h3>
            <div id="user_details"></div>
            <a onclick='document.querySelector("#user_info_popup").remove()'>关闭</a>
        </div>
    </div>

    <!-- 在此处引入JavaScript脚本 -->
</body>
</html>

第二步：CSS样式设计与响应式布局

编写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 {...}
.web_notice div[style*="color:#999"] {...}
.web_notice a {...}

/* 响应式设计 */

/* 电脑端（宽屏） */

@media screen and (min-width: 768px) {

    .web_notice > div {

        width: 550px;

    }

}


/* 平板端 */

@media screen and (max-width: 767px) and (min-width: 481px) {

    .web_notice > div {

        width: calc(100% - 60px);

        margin: 0 30px;

    }

}


/* 手机端 */

@media screen and (max-width: 480px) {

    .web_notice > div {

        width: 100%;

        padding: 30px;

    }

    .web_notice h3 {

        font-size: 24px;

    }

    .web_notice div[style*="color:#999"] {

        font-size: 14px;

    }

    .web_notice a {

        font-size: 16px;

        padding: 8px 20px;

    }

}

第三步：利用JavaScript获取用户信息并填充到弹窗中

编写JavaScript代码段，用于在DOM加载完成后异步获取并显示用户信息：

第四步：具体实现

在上述代码中，detectBrowserName()函数用于分析用户代理字符串以识别浏览器品牌和版本；getTimeGreeting()函数根据当前时间生成不同的问候语；getIpAddress()函数则通过异步请求网络服务获取用户IP地址。这些数据会被动态填充到ID为user_details的HTML元素中，以便用户查看。

最后，当用户点击关闭按钮时，会触发JavaScript事件，移除整个弹窗元素。

总结起来，此教程详细介绍了如何搭建一个自适应的弹窗组件，并将其与实用的用户信息展示相结合，提升了网页交互体验。通过灵活运用前端技术，我们可以轻松应对多种设备环境下的用户体验优化问题。