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

我已经以一种轻微的hacky方式解决了这个问题：提交表单时，我更改了不属于提交表单的元素的自定义数据属性的值。触发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中检测解除引导模式对话框？

2 个答案: