WordPress html 弹窗代码

	
	<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>年龄验证</title>
    <style>
        /* 弹窗样式 */
        .age-popup {
            display: none;
            /* 默认隐藏 */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            /* 半透明背景 */
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .popup-content {
            background: #fff;
            padding: 20px;
            text-align: center;
            border-radius: 8px;
            width: 80%;
            max-width: 400px;
        }

        .popup-content button {
            margin: 10px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
        }

        .popup-content button.enter {
            background-color: #4CAF50;
            color: white;
        }

        .popup-content button.leave {
            background-color: #f44336;
            color: white;
        }
    </style>
    <script>
        // 检查用户是否已经选择过
        window.onload = function () {
            // 检查LocalStorage中是否已有该IP的标识
            if (localStorage.getItem('ageChecked')) {
                // 如果已经选择过，不再显示弹窗
                if (localStorage.getItem('ageVerified') === 'true') {
                    // 
                    document.getElementById('age-popup').style.display = 'none';
                } else {
                    // 
                    window.location.href = "跳转网站链接";
                }
            } else {
                // 显示弹窗
                document.getElementById('age-popup').style.display = 'flex';
            }
        }

        // 用户点击“提示内容”
        function enterSite() {
            // 将选择记录到LocalStorage
            localStorage.setItem('ageChecked', 'true');
            localStorage.setItem('ageVerified', 'true');
            // 隐藏弹窗
            document.getElementById('age-popup').style.display = 'none';
            // 不进行跳转，刷新页面也不会重新弹出
        }

        // 用户点击“提示内容”
        function leaveSite() {
            // 将选择记录到LocalStorage
            localStorage.setItem('ageChecked', 'true');
            localStorage.setItem('ageVerified', 'false');
            window.location.href = "跳转网站链接";
            // 跳转到XX首页
        }
    </script>
</head>

<body>
    <!-- 弹窗 -->
    <div id="age-popup" class="age-popup">
        <div class="popup-content">
            <p>欢迎访问：提示内容</p>
            <button class="enter" onclick="enterSite()">提示内容，进入</button>
            <button class="leave" onclick="leaveSite()">提示内容，离开</button>
        </div>
    </div>
</body>

</html>
WordPress html 弹窗代码

发表回复 取消回复

发表回复取消回复
