如何检测 javascript 中 bootstrap 模态对话框的关闭？

Question

我正在尝试使用 bootstrap 模态对话框。我使用的事件是 hidden 和 show。我使用 show 事件没问题。另一方面，我不明白如何使用 hidden 事件。我在模态对话框中显示一个表单，在表单的 submit 事件中，我用 $('.modal').modal('hide') 隐藏了模态对话框。当通过使用关闭图标、单击具有此标记 <button type="button" class="btn btn-default" data-dismiss="modal">Abort</button> 的中止按钮、按转义键或单击 .modal-backdrop 上的某个位置来关闭模态时，也会触发此隐藏事件。如何区分表单提交成功与对话框关闭？

Answer 1

自 Bootstrap 3:

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

Answer 2

我已经以一种有点老套的方式解决了这个问题：提交表单时，我更改了不属于所提交表单一部分的元素的自定义数据属性的值。当 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);
    } );
} );

如何检测 javascript 中 bootstrap 模态对话框的关闭？

How to detect the dismissal of a bootstrap modal dialog in javascript?

javascript

modal-dialog

dismiss

twitter-bootstrap-3