--showModal()点击事件弹出模态框 支持Tab切换-->
--页面图层在顶层，相当于z-index但不是通过z-index控制 dialog自带top-layer 原生支持

结构：

<button onclick="tan.showModal()">弹窗</button>
    <input type="text">
    
    <dialog id="tan">
        <div class="win">
            <h3>系统通知</h3>
            <p>
                <input type="text" placeholder="请输入用户名">
            </p>
            <p>
                <input type="text" placeholder="请输入验证码">
            </p>
            <button onclick="tan.close()">确认关闭</button>
        </div>
    </dialog>

CSS：

 body {
            font-family: 'Segoe UI', system-ui;
            background: #f0f4f8;
            padding: 2rem;
        }

        dialog {
            border-radius: 12px;
            border: none; 
            background: #f8fbff;
            box-shadow: 
                0 12px 32px rgba(0,0,0,0.12),
                inset 0 1px 0 rgba(255,255,255,0.5);
            width: min(90%, 500px);
            overflow-x: hidden;
        }

        dialog::backdrop {
            background: linear-gradient(45deg, rgba(125,191,201,0.5), rgba(173,216,230,0.5));
            backdrop-filter: blur(4px);
        }

        .win {
            padding: 1.5rem 2rem;
        }
        
        .win p {
            margin: 1.2rem 0;
        }
        
        .win h3 {
            font-size: 1.4rem; 
            color: #2c3e50;
            margin: 0 0 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(60, 60, 67, 0.12);
            font-weight: 600;
        }

        .win input[type="text"] {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid rgba(60, 60, 67, 0.15);
            border-radius: 8px;
            transition: border-color 0.3s;
            background: #fcfcfc;
            box-shadow: 0 1px 2px rgba(0,0,0,0.03);
        }

        .win input[type="text"]:focus {
            outline: none;
            border-color: #80c8d5;
            box-shadow: 0 0 0 3px rgba(128,200,213,0.2);
        }
        
        .win button {
            background: linear-gradient(135deg, #6c5dd3, #7b88ff);
            color: white;
            padding: 0.8rem 1.5rem;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: 
                transform 0.2s ease,
                box-shadow 0.2s ease;
            width: 100%;
            font-weight: 500;
            box-shadow: 0 2px 6px rgba(108, 93, 211, 0.25);
        }

        .win button:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(108, 93, 211, 0.35);
            opacity: 0.95;
        }

        .win input::placeholder {
            color: #a1a1a1;
            font-weight: 300;
        }

        @media (max-width: 480px) {
            dialog {
                width: 90%;
                margin: 1rem;
            }
        }