부트 스트랩 모달 대화 상자로 작업하려고합니다. 내가 사용하는 이벤트는 hidden
및 show
입니다. show
이벤트 사용에 문제가 없습니다 . hidden
다른 한편으로 이벤트 를 사용하는 방법을 이해하지 못합니다 . 모달 대화 상자에 양식을 표시하고 있으며 양식 submit
이벤트에서 $('.modal').modal('hide')
. 이 숨기기 이벤트는 닫기 아이콘을 사용하거나이 마크 업이있는 중단 버튼을 <button type="button" class="btn btn-default" data-dismiss="modal">Abort</button>
클릭하거나 이스케이프 키를 누르거나의 아무 곳이나 클릭하여 모달이 해제 될 때도 시작됩니다 .modal-backdrop
. 성공적인 양식 제출과 대화 닫기를 어떻게 구별 할 수 있습니까?
이 문제는 약간 엉뚱한 방식으로 해결했습니다. 양식이 제출 될 때 제출되는 양식의 일부가 아닌 요소의 사용자 지정 데이터 속성 값을 변경합니다. 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);
} );
} );
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다