Надежно скрыть Bootstrap modal


Я использую Bootstrap 2.3.2, и я использую модальные диалоги, такие как:

<div id="notice1" class="modal hide fade">
    <div class="modal-body">
        <h4>This is a dialog for user...</h4>
    </div>
    ...
</div>

И

var notice1 = $("#notice1");
notice1.modal({
    keyboard: false,
    backdrop: "static",
    show: false
});

// Show the dialog
notice1.modal("show");

// Close the dialog
notice1.modal("hide");

Большую часть времени вышеописанное работает нормально, и модальный диалог открывается и закрывается программно. Однако в некоторых редких случаях вызов .modal("hide") не закрывает диалог вообще, хотя темный фон удаляется.

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

Существует ли надежный способ обеспечить диалог всегда закрывается после вызова .modal("hide")? Или еще лучше, как мы можем обеспечить согласованное поведение hide от Bootstrap? Я не хочу полностью удалять диалог из DOM, потому что тот же диалог может быть повторно использован на странице.

3 4

3 ответа:

Согласно документации: http://getbootstrap.com/2.3.2/javascript.html#modals

Можно перехватить событие hidden и принудительно применить свойство display:none.

    notice1.on('hidden', function () {
      $(this).css("display", "none")
    })

Модальное значение можно скрыть с помощью следующего кода.

 $("#notice1").hide();
 $(".modal-backdrop").hide();

Я использую 1.9.x, ниже код работает..

$("#yourModalWindow").modal('hide');