HTML代码怎么实现模态框_HTML代码模态框功能实现与样式定制方法

<button id="openModalBtn">打开模态框</button>

<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close-button">&times;</span>
        <h2>这是一个模态框标题</h2>
        <p>这里是模态框的具体内容，可以是任何你想要展示的信息或表单。</p>
        <button>确认</button>
    </div>
</div>

/* 模态框容器 */
.modal {
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定定位，不随滚动条滚动 */
    z-index: 1000; /* 确保在其他内容之上 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* 如果内容过多，允许滚动 */
    background-color: rgba(0,0,0,0.4); /* 半透明黑色背景作为遮罩 */
    justify-content: center; /* 使用Flexbox水平居中 */
    align-items: center; /* 使用Flexbox垂直居中 */
}

/* 模态框内容区 */
.modal-content {
    background-color: #fefefe;
    margin: auto; /* 如果不使用Flexbox，可以用这个配合宽度居中 */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* 模态框宽度 */
    max-width: 500px; /* 最大宽度限制 */
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    position: relative; /* 确保关闭按钮可以相对于它定位 */
    animation: fadeIn 0.3s ease-out; /* 简单的进入动画 */
}

/* 关闭按钮 */
.close-button {
    color: #aaa;
    float: right; /* 浮动到右侧 */
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

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

/* 模态框显示时的样式 */
.modal.show {
    display: flex; /* 当需要显示时，改为flex */
}

/* 简单的动画效果 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

document.addEventListener('DOMContentLoaded', () => {
    const openModalBtn = document.getElementById('openModalBtn');
    const myModal = document.getElementById('myModal');
    const closeButton = myModal.querySelector('.close-button');

    // 打开模态框
    openModalBtn.addEventListener('click', () => {
        myModal.classList.add('show');
        // 也可以直接设置 display = 'flex'
        // myModal.style.display = 'flex';
    });

    // 关闭模态框 (点击关闭按钮)
    closeButton.addEventListener('click', () => {
        myModal.classList.remove('show');
        // myModal.style.display = 'none';
    });

    // 关闭模态框 (点击模态框外部区域)
    window.addEventListener('click', (event) => {
        if (event.target === myModal) {
            myModal.classList.remove('show');
            // myModal.style.display = 'none';
        }
    });

    // 关闭模态框 (按下ESC键)
    document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape' && myModal.classList.contains('show')) {
            myModal.classList.remove('show');
            // myModal.style.display = 'none';
        }
    });
});

<!-- 建议的更完善的HTML结构 -->
<div id="myModal" class="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle" aria-describedby="modalDescription">
    <div class="modal-content">
        <h2 id="modalTitle">这是一个模态框标题</h2>
        <p id="modalDescription">这里是模态框的具体内容，可以是任何你想要展示的信息或表单。</p>
        <button class="close-button" aria-label="关闭模态框">&times;</button>
        <!-- 模态框内的其他交互元素 -->
        <button type="button">确认操作</button>
    </div>
</div>

.modal {
    /* ...其他样式... */
    display: none; /* 默认隐藏 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);

    /* 居中魔法 */
    display: flex; /* 当显示时，使用flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* 只有当 .modal 带有 .show 类时，才将其 display 设置为 flex */
.modal.show {
    display: flex;
}

/* 传统居中方案（如果不用Flexbox） */
/* .modal-content 在 .modal 内部，.modal 依然是 fixed 定位 */
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 自身宽高的50%进行偏移，实现精确居中 */
    /* ...其他样式... */
}

// JavaScript 代码片段，展示如何处理焦点管理
document.addEventListener('DOMContentLoaded', () => {
    const openModalBtn = document.getElementById('openModalBtn');
    const myModal = document.getElementById('myModal');
    const closeButton = myModal.querySelector('.close-button');
    let previouslyFocusedElement = null; // 用于存储打开模态框前获得焦点的元素

    const focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
    let focusableElements = [];
    let firstFocusableElement = null;
    let lastFocusableElement = null;

    function trapTabKey(event) {
        if (event.key === 'Tab') {
            if (event.shiftKey) { // Shift + Tab
                if (document.activeElement === firstFocusableElement) {
                    lastFocusableElement.focus();
                    event.preventDefault();
                }
            } else { // Tab
                if (document.activeElement === lastFocusableElement) {
                    firstFocusableElement.focus();
                    event.preventDefault();
                }
            }
        }
    }

    function openModal() {
        previouslyFocusedElement = document.activeElement; // 记录打开前的焦点
        myModal.classList.add('show');
        // 确保模态框内的元素可以被tab键遍历
        focusableElements = Array.from(myModal.querySelectorAll(focusableElementsString));
        firstFocusableElement = focusableElements[0];
        lastFocusableElement = focusableElements[focusableElements.length - 1];

        if (firstFocusableElement) {
            firstFocusableElement.focus(); // 将焦点设置到模态框内的第一个可聚焦元素
        }
        document.addEventListener('keydown', trapTabKey); // 启用Tab键陷阱
    }

    function closeModal() {
        myModal.classList.remove('show');
        document.removeEventListener('keydown', trapTabKey); // 移除Tab键陷阱
        if (previouslyFocusedElement) {
            previouslyFocusedElement.focus(); // 将焦点返回到打开模态框前的元素
        }
    }

    openModalBtn.addEventListener('click', openModal);
    closeButton.addEventListener('click', closeModal);
    window.addEventListener('click', (event) => {
        if (event.target === myModal) {
            closeModal();
        }
    });
    document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape' && myModal.classList.contains('show')) {
            closeModal();
        }
    });
});