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

Question

我正在制作自己的模态。但是我需要像引导程序中的模态事件一样为我的模态设置事件。因为我希望在我自己的模态显示给用户之后发生一些事情

我的问题是这些引导模式事件相当于普通的香草js

show.bs.modal
显示.bs.modal
hide.bs.modal
hidden.bs.modal

标签： javascriptbootstrap-modal

Answer 1

您可以为此使用JavaScript 事件。希望下面的例子有所帮助。

当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);