创建自适应弹窗 v2.1:整合用户浏览器信息、IP地址与实时问候
创建自适应弹窗 v2.1:整合用户浏览器信息、IP地址与实时问候
2024-03-25 0 评论 60 阅读 2 点赞

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

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

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

效果图

1

第一步: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事件,移除整个弹窗元素。

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

2

我来讲讲 (0)

取消