js点击弹出抽屉效果

可以一个页面多次重复使用的简单js弹窗效果，点击遮罩空白处或关闭按钮可以关闭弹窗，现在是从下往上弹出。稍微修改下css，其实上下左右可以

Html

<div class="open-btn" data-popup="popup1"></div>
<div class="open-btn" data-popup="popup2"></div>

<div class="popup-overlay" id="popup1">
    <div class="popup-content">
        <div class="flex justify-between align-center popup-head">
            <h2>标题</h2>
            <span class="iconfont close"></span>
        </div>
        <div class="popup-scroll">
            <div class="popup-box">
                内容
            </div>
        </div>
    </div>
</div>
<div class="popup-overlay" id="popup2">
    <div class="popup-content">
        <div class="flex justify-between align-center popup-head">
            <h2>标题</h2>
            <span class="iconfont close"></span>
        </div>
        <div class="popup-scroll">
            <div class="popup-box">
                内容
            </div>
        </div>
    </div>
</div>

Css

body.popup-open {
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}
.open-btn {
    cursor: pointer;
}
.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.popup-content {
    background-color: white;
    width: 7.5rem;
    margin: 0 auto;
    max-height: 60%;
    border-radius: .2rem .2rem 0 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
    -webkit-transition: opacity 0.3s ease, transform 0.3s ease;
    overflow-y: auto;
}
.popup-content .popup-head {
    padding: .3rem;
    border-bottom: 1px solid #eeb27e;
}
.popup-content .popup-head h2 {
    font-size: .38rem;
    font-weight: bold;
    color: #f18f3a;
}
.popup-content .popup-head .close {
    cursor: pointer;
    color: #000;
    font-size: .4rem;
}
.popup-content .popup-scroll {
    padding: .3rem;
}
.popup-overlay.active .popup-content {
    opacity: 1;
    transform: translateY(0);
}

.popup-content .popup-box {
    color: #000;
    padding-bottom: .4rem;
}
.popup-content .popup-box h3 {
    font-size: .32rem;
    font-weight: bold;
    margin-bottom: .1rem;
}
.popup-content .popup-box p {
    line-height: 1.4;
    margin-bottom: .15rem;
}
.popup-content .popup-box .img a {
    display: inline-block;
}
.popup-content .popup-box img {
    border-radius: .1rem;
}

Js

const openButtons = document.querySelectorAll(".open-btn");
const closeButtons = document.querySelectorAll(".close");
const popupOverlays = document.querySelectorAll(".popup-overlay");
const body = document.body;

openButtons.forEach((button) => {
    button.addEventListener("click", () => {
        const popupId = button.getAttribute("data-popup");
        const popup = document.getElementById(popupId);
        popup.style.display = "flex";
        body.classList.add("popup-open");
        // 添加一个类以触发动画
        setTimeout(() => {
            popup.classList.add("active");
        }, 10);
    });
});

closeButtons.forEach((button) => {
    button.addEventListener("click", () => {
        const popup = button.closest(".popup-overlay");
        popup.classList.remove("active");
        // 等待动画完成后再隐藏弹出窗口
        setTimeout(() => {
            popup.style.display = "none";
            body.classList.remove("popup-open");
        }, 300);
    });
});

popupOverlays.forEach((popup) => {
    popup.addEventListener("click", (event) => {
        if (event.target === popup) {
            popup.classList.remove("active");
            // 等待动画完成后再隐藏弹出窗口
            setTimeout(() => {
                popup.style.display = "none";
                body.classList.remove("popup-open");
            }, 300);
        }
    });
});