实现带15秒延迟的多内容跳转弹窗并适配移动端

现有代码通过页面元素的innerHTML展示跳转提示，现在需要将其改造为弹窗功能，具体要求：

• 根据输入的邮编，弹窗显示对应6种提示信息之一（或无匹配时的默认提示）
• 弹窗展示15秒后自动打开目标网站
• 弹窗需适配移动端设备

改造后的完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>离开治疗中心</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Verdana, sans-serif;
            max-width: 800px;
            margin: 2rem auto;
            padding: 0 1rem;
            text-align: center;
        }
        .zip-form {
            margin-bottom: 2rem;
        }
        .zip-form label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: bold;
        }
        .zip-form input {
            padding: 0.5rem;
            width: 100%;
            max-width: 300px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .zip-form button {
            margin-top: 1rem;
            padding: 0.6rem 1.2rem;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
        }
        .zip-form button:hover {
            background-color: #0056b3;
        }
        /* 弹窗遮罩 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        /* 弹窗容器 */
        .modal {
            background-color: white;
            padding: 2rem;
            border-radius: 8px;
            width: 90%;
            max-width: 500px;
            position: relative;
            text-align: left;
        }
        .modal-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            font-size: 1.5rem;
            cursor: pointer;
            color: #666;
        }
        .modal-countdown {
            margin-top: 1rem;
            color: #666;
            font-size: 0.9rem;
        }
        /* 移动端适配 */
        @media (max-width: 480px) {
            .modal {
                padding: 1.5rem;
                width: 95%;
            }
        }
    </style>
</head>
<body>
    <div class="zip-form">
        <label for="Zipcode">邮政编码:</label>
        <input type="text" id="Zipcode" name="Zipcode" placeholder="请输入邮编">
        <button onclick="handleZipSubmit()">查找本地互助小组</button>
    </div>

    <script>
        // 存储邮编对应的数据，便于维护
        const zipData = [
            { zip: "41310", text: "感谢您的输入，您将被引导至Bluegrass互助小组网站", url: "http://www.bluegrassintergroup.org/" },
            { zip: "42101", text: "感谢您的输入，您将被引导至Bowling Green互助小组网页", url: "http://bowlinggreenaa.org/" },
            { zip: "42070", text: "感谢您的输入，您将被引导至西肯塔基互助小组网站", url: "https://wkintergroup.org/" },
            { zip: "40202", text: "感谢您的输入，您将被引导至大路易斯维尔互助小组网站", url: "https://www.loukyaa.org/" },
            { zip: "41063", text: "感谢您的输入，您将被引导至北肯塔基互助小组网站", url: "https://www.nkyaa.info/" },
            { zip: "42343", text: "感谢您的输入，您将被引导至Owensboro-Yellowbanks互助小组网站", url: "https://www.area26.net/wp/owensboro-yellowbanks-central-office/" }
        ];
        const defaultData = {
            text: "抱歉，我们未找到覆盖该区域的本地互助小组。您可以联系其他互助小组，以获取肯塔基州、印第安纳州南部和俄亥俄州的匿名戒酒会相关信息。",
            url: "https://www.area26.net/wp/local-intergroups/"
        };

        function handleZipSubmit() {
            const zipInput = document.getElementById("Zipcode").value.trim();
            // 匹配对应邮编数据
            const targetData = zipData.find(item => item.zip === zipInput) || defaultData;
            // 创建弹窗
            createModal(targetData);
        }

        function createModal(data) {
            // 创建遮罩层
            const overlay = document.createElement("div");
            overlay.className = "modal-overlay";
            
            // 创建弹窗内容
            const modal = document.createElement("div");
            modal.className = "modal";
            
            const closeBtn = document.createElement("span");
            closeBtn.className = "modal-close";
            closeBtn.textContent = "×";
            closeBtn.onclick = () => overlay.remove();
            
            const content = document.createElement("p");
            content.textContent = data.text;
            
            const countdownText = document.createElement("p");
            countdownText.className = "modal-countdown";
            let countdown = 15;
            countdownText.textContent = `将在 ${countdown} 秒后自动跳转，点击×可关闭弹窗`;
            
            // 组装弹窗
            modal.appendChild(closeBtn);
            modal.appendChild(content);
            modal.appendChild(countdownText);
            overlay.appendChild(modal);
            document.body.appendChild(overlay);
            
            // 倒计时跳转逻辑
            const timer = setInterval(() => {
                countdown--;
                countdownText.textContent = `将在 ${countdown} 秒后自动跳转，点击×可关闭弹窗`;
                if (countdown <= 0) {
                    clearInterval(timer);
                    window.open(data.url, '_blank');
                    overlay.remove();
                }
            }, 1000);
            
            // 点击遮罩也可关闭弹窗
            overlay.onclick = (e) => {
                if (e.target === overlay) {
                    clearInterval(timer);
                    overlay.remove();
                }
            };
        }
    </script>
</body>
</html>

关键改动说明 #

1. 数据结构重构：把邮编、提示文本、目标网址整理成数组，替代原来冗长的if-else判断，后续新增或修改邮编规则只需修改数组即可，维护成本更低
2. 弹窗样式优化：添加半透明遮罩层，弹窗居中显示，设置响应式宽度（移动端占95%宽度，桌面端最大500px），确保在不同设备上都有良好的显示效果
3. 倒计时与交互：弹窗内显示实时倒计时，15秒后自动打开目标网址；同时提供关闭按钮，点击遮罩或关闭按钮可手动关闭弹窗，停止跳转
4. 移动端适配：通过viewport元标签确保移动端页面缩放正常，媒体查询优化弹窗在小屏幕上的内边距和宽度，提升移动端用户体验

内容的提问来源于stack exchange，提问作者Webmaster website