icon RUS

79

как быстро закрыть bootstrap modal?

Евгений
Евгений
   00:33
1401

я использую boostrap модальное окно и это

<div class="modal fade" onSubmit="return false;" id="a" tabindex="-1" role="dialog" aria-labelledby="aModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg2" role="document">
            <div class="modal-content" style="width:850px; margin:auto">
                <div class="modal-header">
                    
                </div>
                <div class="modal-body">
                    
                </div>
                <div class="modal-footer">
                    
                </div>
            </div>
        </div>
    </div>
</div>

<button class="btn btn-outline-success btn-sm" data-toggle="modal" data-target="#a" id="aBtn" type="button">TEST</button>

модальное окно закрывается медленно. может быть анимация или затухание я предполагаю но я не cмог найти как быстро закрыть его

Статус:
В процессе
Приоритет:
Средний
Версия:
  • 4.x
Каталог документации:
Компоненты/Modal
imazin ответил на вопрос

09:24

вообще за анимацию модального окна отвечает класс .fade Если его убрать то можно увидеть как статично оно становится на открытии и закрытии. Если нужно сделать только на закрытии, то можно удалять этот класс перед $('#a').modal('hide'); через событие hide.bs.modal и потом снова возвращать можно тоже на событии но уже show.bs.modal

Здесь пример jsfiddle

$(function () {
    $(".custom-close").on('click', function() {
       $('#a').modal('hide');
    });
    
    $('#a').on('hide.bs.modal', function (e) {
      $('#a').removeClass('fade');
    });
    
    $('#a').on('show.bs.modal', function (e) {
      $('#a').addClass('fade');
    });   
});

Активность