image.png

Markup

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>游戏风格弹窗</title>
    <style>
        /* 游戏风格遮罩 - 半透明黑 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s;
            padding: 20px;
        }

        .modal-overlay.active {
            opacity: 1;
        }

        /* 游戏弹窗主体 - 带厚重边框和立体阴影 */
        .modal {
            background: #f0e6d2;
            border: 4px solid #8b4513;
            border-radius: 2px;
            max-width: 80%;
            min-width: 280px;
            box-shadow: 0 8px 0 rgba(0, 0, 0, 0.3), 
                      inset 0 0 10px rgba(255, 215, 0, 0.2);
            position: relative;
            transform: scale(0.9);
            transition: transform 0.2s ease-out;
            max-height: 80vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .modal-overlay.active .modal {
            transform: scale(1);
        }

        /* 游戏风格标题栏 */
        .modal-header {
            background: #cd853f;
            padding: 8px 15px;
            border-bottom: 3px solid #8b4513;
            color: #fff;
            font-weight: bold;
            text-shadow: 1px 1px 0 #000;
        }

        /* 关闭按钮 - 游戏风格叉号 */
        .modal-close {
            position: absolute;
            top: 8px;
            right: 10px;
            background: #a0522d;
            border: 2px solid #8b4513;
            color: white;
            width: 24px;
            height: 24px;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
            transition: all 0.1s;
            text-decoration: none;
        }

        .modal-close:hover {
            background: #cd5c5c;
            transform: translateY(1px);
            box-shadow: 1px 0 0 rgba(0, 0, 0, 0.3);
        }

        /* 内容区域 -  parchment 风格背景 */
        .modal-content {
            margin: 0;
            padding: 20px;
            background: #f5f0e1;
            word-wrap: break-word;
            word-break: break-all;
            overflow-y: auto;
            flex: 1;
            color: #3a2e1f;
            line-height: 1.6;
        }

        /* 按钮区域 */
        .modal-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
            padding: 15px;
            background: #e6d2b7;
            border-top: 3px solid #8b4513;
        }

        /* 游戏风格链接按钮 */
        .modal-link {
            padding: 8px 20px;
            border: 3px solid #8b4513;
            border-radius: 0;
            cursor: pointer;
            background: #d2b48c;
            font-weight: bold;
            color: #2c1e0e;
            box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
            transition: all 0.1s;
            text-decoration: none;
            display: inline-block;
        }

        .modal-link:hover {
            background: #e6c28e;
            color: #2c1e0e;
        }

        .modal-link:active {
            transform: translate(2px, 2px);
            box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
            position: relative;
            top: 1px;
        }

        .modal-link.confirm {
            background: #4CAF50;
            border-color: #2e7d32;
            color: white;
        }

        .modal-link.confirm:hover {
            background: #66bb6a;
            color: white;
        }
    </style>
</head>
<body style="background: #222; padding: 50px;">
    <button style="padding: 10px 20px; background: #8b4513; color: white; border: 3px solid #cd853f; cursor: pointer;"
            onclick="showModal({
                title: '任务完成',
                text: '你已成功完成主线任务「初探森林」！获得奖励：金币×500、经验×200、铁剑×1。是否立即前往下一个任务区域？',
                confirmText: '前往下一站',
                cancelText: '返回城镇',
                confirmUrl: 'next-quest.html',
                cancelUrl: 'town.html'
            })">
        打开游戏弹窗
    </button>

    <script>
        let zIndex = 1000;

        function showModal(options = {}) {
            const config = {
                title: options.title || '系统提示',
                text: options.text || '这是一个游戏弹窗',
                confirmText: options.confirmText || '确认',
                cancelText: options.cancelText || '取消',
                confirmUrl: options.confirmUrl || '#', // 确认按钮跳转URL
                cancelUrl: options.cancelUrl || '#',   // 取消按钮跳转URL
                onConfirm: options.onConfirm || function() {}, // 确认额外事件
                onCancel: options.onCancel || function() {}    // 取消额外事件
            };

            // 创建遮罩层
            const overlay = document.createElement('div');
            overlay.className = 'modal-overlay';
            overlay.style.zIndex = zIndex++;

            // 创建弹窗容器
            const modal = document.createElement('div');
            modal.className = 'modal';

            // 标题栏
            const header = document.createElement('div');
            header.className = 'modal-header';
            header.textContent = config.title;

            // 关闭按钮（a标签）
            const closeBtn = document.createElement('a');
            closeBtn.className = 'modal-close';
            closeBtn.textContent = '×';
            closeBtn.href = config.cancelUrl; // 关闭默认使用取消按钮的URL
            closeBtn.onclick = function(e) {
                removeModal();
                config.onCancel();
                // 如果是默认#，阻止默认跳转行为
                if (config.cancelUrl === '#') e.preventDefault();
            };

            // 内容区域
            const content = document.createElement('div');
            content.className = 'modal-content';
            content.textContent = config.text;

            // 按钮容器
            const buttons = document.createElement('div');
            buttons.className = 'modal-buttons';

            // 取消链接
            const cancelLink = document.createElement('a');
            cancelLink.className = 'modal-link';
            cancelLink.textContent = config.cancelText;
            cancelLink.href = config.cancelUrl;
            cancelLink.onclick = function(e) {
                removeModal();
                config.onCancel();
                // 如果是默认#，阻止默认跳转行为
                if (config.cancelUrl === '#') e.preventDefault();
            };

            // 确认链接
            const confirmLink = document.createElement('a');
            confirmLink.className = 'modal-link confirm';
            confirmLink.textContent = config.confirmText;
            confirmLink.href = config.confirmUrl;
            confirmLink.onclick = function(e) {
                removeModal();
                config.onConfirm();
                // 如果是默认#，阻止默认跳转行为
                if (config.confirmUrl === '#') e.preventDefault();
            };

            // 组装弹窗
            buttons.appendChild(cancelLink);
            buttons.appendChild(confirmLink);
            modal.appendChild(header);
            modal.appendChild(closeBtn);
            modal.appendChild(content);
            modal.appendChild(buttons);
            overlay.appendChild(modal);
            document.body.appendChild(overlay);

            // 显示动画
            setTimeout(() => overlay.classList.add('active'), 10);

            // 移除弹窗
            function removeModal() {
                overlay.classList.remove('active');
                setTimeout(() => overlay.remove(), 200);
            }
        }
    </script>
</body>
</html>