点击按钮切换Modal内容：初始显示Modal1，点击后切换至Modal2并实现平滑过渡

需求说明 #

• 默认显示第一个模态框（Modal1）
• 点击当前模态框的按钮，切换到下一个模态框（Modal2），同时隐藏当前模态框
• 切换过程需要平滑过渡效果
• 后续可扩展至4个及以上模态框

完整代码实现 #

HTML结构 #

<body>
    <div class="conteudo">
        <!-- 统一类名并添加索引属性，方便后续扩展 -->
        <div class="modal-box active" data-modal-index="0">            
            <div class="boxes">
                <div class="modalTxt">
                    <h1>MODAL 1 <br>Accept?</h1>
                    <div class="lineButton">
                        <button type="button" class="modal-next">Accept</button>
                    </div>                           
                </div>         
            </div>
        </div>
        <div class="modal-box" data-modal-index="1">            
            <div class="boxes">
                <div class="modalTxt">
                    <h1>MODAL 2 <br>Accept?</h1>
                    <div class="lineButton">
                        <button type="button" class="modal-next">Accept</button>
                    </div>                           
                </div>         
            </div>
        </div>
    </div>
</body>

CSS样式 #

.conteudo {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* 确保模态框贴底显示 */
}

.modal-box {
    width: 100%;
    max-width: 500px;
    background: #fff;
    position: absolute;
    bottom: 0;
    height: 400px;
    opacity: 0;
    transform: translateY(100%); /* 默认向下移出视口 */
    transition: all 0.3s ease-in-out; /* 平滑过渡动画 */
    pointer-events: none; /* 隐藏时不响应点击事件 */
}

/* 激活状态的模态框样式 */
.modal-box.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.lineButton button {
    font-size: 14px;
    text-align: center;
    border: 2px solid black;
    padding: 16px;
    border-radius: 16px;
    cursor: pointer;
}

JavaScript逻辑 #

// 获取所有模态框和切换按钮
const modalBoxes = document.querySelectorAll('.modal-box');
const nextButtons = document.querySelectorAll('.modal-next');

// 为每个切换按钮绑定点击事件
nextButtons.forEach(button => {
    button.addEventListener('click', () => {
        // 获取当前激活的模态框及其索引
        const currentActiveModal = document.querySelector('.modal-box.active');
        const currentIndex = parseInt(currentActiveModal.dataset.modalIndex);
        // 计算下一个模态框的索引
        const nextIndex = currentIndex + 1;
        
        // 边界判断：如果是最后一个模态框，可自行调整逻辑（比如关闭模态框或循环切换）
        if (nextIndex >= modalBoxes.length) return;
        
        // 切换模态框状态
        currentActiveModal.classList.remove('active');
        modalBoxes[nextIndex].classList.add('active');
    });
});

关键实现要点 #

• 统一结构与扩展性：将不同模态框的类名统一为modal-box，通过data-modal-index标记顺序，后续新增模态框只需复制结构并递增索引，无需修改核心CSS和JS代码。
• 平滑过渡效果：利用CSS的transition属性，结合opacity和transform: translateY()实现模态框的滑入滑出动画，比单纯的显示/隐藏更自然。
• 状态控制：通过active类控制模态框的显示状态，同时设置pointer-events: none避免隐藏的模态框干扰页面交互。
• 灵活切换逻辑：JS中通过索引计算实现顺序切换，如需循环切换，可将nextIndex改为(currentIndex + 1) % modalBoxes.length。

内容的提问来源于stack exchange，提问作者Awa