如何创建模态弹窗

<!-- HTML结构示例 -->
<button id="openModalBtn">打开弹窗</button>

<div id="myModal" class="modal-overlay">
    <div class="modal-content">
        <span class="close-button">&times;</span>
        <h2>弹窗标题</h2>
        <p>这是模态弹窗的内容区域，你可以在这里放置表单、提示信息或其他任何需要用户关注的元素。</p>
        <button>确认</button>
    </div>
</div>

position: fixed

display: none

/* CSS样式示例 */
.modal-overlay {
    display: none; /* 默认隐藏 */
    position: fixed;
    z-index: 1000; /* 确保在其他内容之上 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* 如果内容过多，允许滚动 */
    background-color: rgba(0,0,0,0.6); /* 半透明黑色背景 */
    backdrop-filter: blur(2px); /* 增加一点毛玻璃效果，提升现代感 */
    animation: fadeIn 0.3s ease-out; /* 简单的入场动画 */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 垂直居中，并留出顶部空间 */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* 弹窗宽度 */
    max-width: 500px; /* 最大宽度限制 */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    position: relative; /* 用于定位关闭按钮 */
    animation: slideIn 0.3s ease-out; /* 内容入场动画 */
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1; /* 确保X字符垂直居中 */
}

.close-button:hover,
.close-button:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* 简单的动画效果 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

// JavaScript交互示例
document.addEventListener('DOMContentLoaded', () => {
    const openModalBtn = document.getElementById('openModalBtn');
    const modal = document.getElementById('myModal');
    const closeButton = modal.querySelector('.close-button');

    function openModal() {
        modal.style.display = 'block';
        // 阻止背景滚动
        document.body.style.overflow = 'hidden';
        // 将焦点设置到弹窗内部，提升可访问性
        modal.querySelector('.modal-content').focus();
    }

    function closeModal() {
        modal.style.display = 'none';
        document.body.style.overflow = ''; // 恢复背景滚动
        // 恢复焦点到触发元素，如果需要
        openModalBtn.focus();
    }

    openModalBtn.addEventListener('click', openModal);

    closeButton.addEventListener('click', closeModal);

    // 点击背景关闭弹窗
    modal.addEventListener('click', (event) => {
        if (event.target === modal) {
            closeModal();
        }
    });

    // 按下ESC键关闭弹窗
    document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape' && modal.style.display === 'block') {
            closeModal();
        }
    });
});

modal-overlay

position: fixed; top: 0; left: 0; width: 100%; height: 100%;

div

modal-content

position: fixed

absolute

transform: translate(-50%, -50%)

padding

max-width

style.display

'block'

'none'

modal-active

is-open

modal-overlay

transition

// 使用类名切换的JS示例
// 假设CSS中定义了 .modal-overlay.is-open { display: block; opacity: 1; ... }
// 并且 .modal-overlay { opacity: 0; transition: opacity 0.3s ease-out; }
function openModalWithClass() {
    modal.classList.add('is-open');
    document.body.style.overflow = 'hidden';
    modal.querySelector('.modal-content').focus();
}

function closeModalWithClass() {
    modal.classList.remove('is-open');
    document.body.style.overflow = '';
    openModalBtn.focus();
}

openModalBtn.addEventListener('click', openModalWithClass);
closeButton.addEventListener('click', closeModalWithClass);
// 其他关闭逻辑也相应改为调用 closeModalWithClass

Escape

role="dialog"

aria-modal="true"

aria-labelledby

aria-describedby

ESC

body

overflow: hidden;