Bootstrap 4 модал не отображается снова после того, как был скрыт

Question

У меня есть функция, чтобы скрыть мой модал:

function hideModal(){ 

    $('#mainModal').on('shown.bs.modal', function(e) {
        $("#mainModal").modal("hide");
    });
}  

Когда я открываю модальный в первый раз, он работает нормально. Затем я вызываю hideModal(), чтобы скрыть его, что также работает.

Я считаю, что любой последующий вызов, чтобы открыть модальное:

$('#mainModal').modal();

... приводит к тому, что модальное окно открывается перед очень быстрым исчезновением снова.

Я не запускаю никакого кода после открытия второго модального режима.

Я проверил свой код, чтобы убедиться, что загружается только один экземпляр начальной загрузки.

Зачем вызывать $('#mainModal'). Modal(); работать в первый раз, но не в следующий раз?

Спасибо за ваше время и помощь.

Answer 1

Как скрытие, так и показ модальных событий являются асинхронными событиями, что означает, что для их завершения потребуется несколько мс.

Итак, если вы позвоните modal() или же modal('show') в то время как это все еще скрывается, это не покажет. Обратно, если вы позвоните modal('hide') пока он еще не показан, он не будет скрываться.

Answer 2

Спасибо, парни. Мне нужно сохранить этого слушателя, т.е. не просто иметь:

$("#mainModal").modal("hide");

в противном случае модал не скрывается из-за вызова ("show"), который все еще действовал, когда вызывался ("hide").

У jQuery есть прослушиватель.off, который удаляет слушателя после его запуска только один раз.

Поэтому я заменил:

$('#mainModal').on('shown.bs.modal', function(e) {
        $("#mainModal").modal("hide");
});

с:

$('#mainModal').one('shown.bs.modal', function(e) {
        $("#mainModal").modal("hide");
});

и сейчас получаю желаемый результат.

Answer 3

Что происходит, так это то, что в первый (и последующий!) Раз вы скрываете модал, hideModal Функция, вы устанавливаете обработчик события, который закрывает модальный каждый раз, когда вы показываете его. Это должно работать, оно просто скрывает модальный при вызове:

function hideModal() { 
    $("#mainModal").modal("hide");
}