Как обнаружить отклонение модального диалогового окна начальной загрузки в JavaScript?

Question

Я пытаюсь работать с модальным диалогом начальной загрузки. Я использую следующие события: hidden а также show, У меня нет проблем с использованием show событие. Я не понимаю, как использовать hidden событие с другой стороны. Я отображаю форму в модальном диалоге и на submit событие формы, я скрываю модальный диалог с $('.modal').modal('hide'), Это событие скрытия также вызывается, когда модал отклоняется либо с помощью значка закрытия, нажав кнопку отмены, которая имеет эту разметку <button type="button" class="btn btn-default" data-dismiss="modal">Abort</button>, нажав клавишу выхода или нажав где-нибудь на .modal-backdrop, Как я могу отличить успешную отправку формы от закрытия диалогового окна?

Answer 1

Я решил эту проблему немного хакерским способом: при отправке формы я изменяю значение настраиваемого атрибута данных элемента, который не является частью отправляемой формы. Когда hidden При возникновении событий я сравниваю значения моего пользовательского атрибута данных с текущим значением элемента ввода в форме, отображаемой в модальном режиме. Если два значения различаются, модал отклоняется, в противном случае он был отправлен.

$( '#modalWithForm' ).on( 'submit', 'form', function ( e ) {
    e.preventDefault();
    $.ajax( {
        url: $( this ).attr( 'action' ),
        method: 'POST',
        data: {
            param: parseInt( $( '#input' ).val(), 10),
        }
    } ).done( function ( ) {
        $( 'label[data-custom]' ).data( 'custom', $( '#input' ).val() );
        $( '#modalWithForm' ).modal( 'hide' );
    } );
} );

$( '#modalWithForm' ).on( 'hidden.bs.modal', function () {
    var modalDismissed = parseInt( $( '#input' ).val(), 10 ) !== parseInt( $( 'label[data-custom]' ).data( 'custom' ) );
    $.ajax( {
        url: '/Update',
        method: 'POST',
        dataType: "text",
        data: {
            param: parseInt( modalDismissed ? $( 'label[data-custom]' ).data( 'custom' ) : $( '#input' ).val(), 10 )
        }
    } ).done( function ( updatedForm ) {
        $('form').empty().html(updatedForm);
    } );
} );

Answer 2

Начиная с Bootstrap 3:

$('#yourModal').on('hidden.bs.modal', function () {
  // code here
});