如何配置MicroModal使其仅通过外部mousedown事件关闭模态框

实现思路：

• 移除遮罩层（modal__overlay）上默认的data-micromodal-close属性，禁用MicroModal自带的点击遮罩关闭逻辑
• 手动绑定mousedown事件到遮罩层，仅当用户在遮罩层按下鼠标时触发关闭操作
• 可选屏蔽遮罩层的mouseup事件冒泡，避免多余交互冲突

HTML修改说明 #

所有模态框的.modal__overlay节点移除data-micromodal-close属性，修改后示例：

<div class="modal micromodal-slide" id="modal-1" aria-hidden="true">
    <!-- 移除了原有的data-micromodal-close属性 -->
    <div class="modal__overlay" tabindex="-1">
        <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
            <!-- 其余内部结构不变，关闭按钮的data-micromodal-close属性保留即可 -->
            <header class="modal__header">
                <h2 class="modal__title" id="modal-1-title">
                    New event
                </h2>
                <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
            </header>
            <main class="modal__content" id="modal-1-content">
                <input type="text" placeholder="name">
            </main>
            <footer class="modal__footer">
                <button class="modal__btn modal__btn-primary">Continue</button>
                <button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Close</button>
            </footer>
        </div>
    </div>
</div>

其余两个模态框（event-modal-1、event-modal-2）的遮罩层也做同样修改即可。

JS修改说明 #

在原有逻辑基础上新增事件监听代码：

let openButton = document.getElementById('open-modal');

openButton.addEventListener('click', function() {
    MicroModal.show('modal-1');
});

// 新增：仅监听遮罩层的mousedown事件触发关闭
document.addEventListener('mousedown', function(e) {
    if (e.target.classList.contains('modal__overlay')) {
        const activeModal = document.querySelector('.modal.is-open');
        if (activeModal) MicroModal.close(activeModal.id);
    }
});

// 可选：阻止遮罩层mouseup事件冒泡，避免触发其他意外逻辑
document.addEventListener('mouseup', function(e) {
    if (e.target.classList.contains('modal__overlay')) {
        e.stopImmediatePropagation();
    }
}, true);

CSS代码不需要做任何修改。

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