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

{message type=”success” content=”本文代码由故渊渡编写；格式由阿里-通义千问编写”/}

在这篇文章中，我们将详细介绍如何运用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加载完成后异步获取并显示用户信息：

{hide}

document.addEventListener('DOMContentLoaded', async function () {
    // 定义检测用户浏览器类型和版本的函数detectBrowserName()
    function detectBrowserName() {...}

    // 调用detectBrowserName()获取浏览器信息
    let browserDetails = detectBrowserName();

    // 异步获取用户IP地址
    let ipAddress = await getIpAddress();

    // 获取实时时间并生成问候语
    let timeGreeting = getTimeGreeting();

    // 将用户信息填充到弹窗内容区域
    document.getElementById('user_details').innerHTML = `
        ${browserDetails}<br>
        您的IP地址：${ipAddress}<br>
        ${timeGreeting}
    `;
});

// 定义获取实时问候语的函数getTimeGreeting()
    function getTimeGreeting() {
        const now = new Date();
        const hours = now.getHours();
        
        if (hours >= 22 || hours < 5) {
            return '现在是深夜，祝您晚安';
        } else if (hours >= 5 && hours < 12) {
            return `现在是早上，祝您早上好，今天是${now.getFullYear()}年${now.getMonth()+1}月${now.getDate()}日`;
        } else if (hours >= 12 && hours < 14) {
            return '现在是中午，祝您午餐愉快';
        } else if (hours >= 14 && hours < 18) {
            return '现在是下午，祝您工作顺利';
        } else if (hours >= 18 && hours < 20) {
            return '现在是傍晚，祝您享受美好的黄昏时光';
        } else if (hours >= 20 && hours < 22) {
            return '现在是晚上，祝您晚餐愉快';
        }
    }

// 定义异步获取用户IP地址的函数getIpAddress()
const IP_SERVICES = [

  'https://ipapi.co/json/',

  'https://api.ipify.org/?format=json',

];


async function getIpAddress() {

  for (const serviceUrl of IP_SERVICES) {

    try {

      const response = await fetch(serviceUrl);

      if (!response.ok) continue; // 如果HTTP状态码不是200，跳过当前服务

      const data = await response.json();

      return data.ip;

    } catch (error) {

      console.error(`Error fetching from ${serviceUrl}:`, error);

    }

  }


  return '未知';

}


// 调用函数展示用户IP地址

(async () => {

  const ipAddress = await getIpAddress();

  console.log('用户IP地址：', ipAddress);

})();
    
    // 调用函数展示用户IP地址
    showUserInfo();

{/hide}

第四步：具体实现

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

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

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

温馨提示：本文最后更新于2024-03-25 23:22:00，某些文章具有时效性，若有错误或已失效，请在下方留言或联系站长。