如何检测javascript中引导模式对话框的解除？答案

【问题标题】：How to detect the dismissal of a bootstrap modal dialog in javascript?如何检测javascript中引导模式对话框的解除？
【发布时间】：2016-08-14 21:51:01
【问题描述】：

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

【问题讨论】：

标签： javascript twitter-bootstrap-3 modal-dialog dismiss

【解决方案1】：

自 Bootstrap 3 以来：

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

【讨论】：

感谢您的努力，但我已经在使用“隐藏”事件了。问题是无论表单是否已成功提交或对话框被关闭，都会触发“隐藏”和“隐藏”事件。我需要能够区分这两者。
您可以监听按钮事件，并在此事件中关闭模式。否则，模式会被 X 按钮关闭。

【解决方案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);
    } );
} );

【讨论】：