如何制作自己的自定义模态事件

Question

我正在制作我自己的模态。但是我需要为我的模式设置事件，就像 bootstrap 中的模式事件一样。因为我希望在向用户显示我自己的模态后发生一些事情

我的问题是这些 bootstrap 模态事件在普通 js 中的等价物是什么

show.bs.modal
shown.bs.modal
hide.bs.modal
hidden.bs.modal

Answer 1

您可以使用 JavaScript Events。希望以下示例对您有所帮助。

当show_modal函数调用时会触发modal_show事件。

hide_modal函数调用时会触发modal_hide事件。

我们可以在任何地方收听这两个事件 window.addEventListener('modal_show'...

function show_modal() {
    // show modal logic here
    
    // Create a custom event
    const event = new Event('modal_show');
    // Dispatch the event
    window.dispatchEvent(event);
}

function hide_modal() {
    // hide modal logic here

    // Create a custom event
    const event = new Event('modal_hide');
    // Dispatch the event
    window.dispatchEvent(event);
}

// Listen for the event.
window.addEventListener('modal_show', function (e) { /* ... */ }, false);
window.addEventListener('modal_hide', function (e) { /* ... */ }, false);

如何制作自己的自定义模态事件

How to make own custom modal events

javascript

bootstrap-modal