jquery-ui-dialog - 대화 상자 닫기 이벤트에 연결하는 방법
-
05-07-2019 - |
문제
나는 jquery-ui-dialog
플러그인
어떤 상황에서 대화 상자가 닫힐 때 페이지를 새로 고치는 방법을 찾고 있습니다.
대화 상자에서 닫기 이벤트를 캡처하는 방법이 있습니까?
닫기 버튼을 클릭하면 코드를 실행할 수 있다는 것을 알고 있지만 사용자가 이스케이프나 오른쪽 상단의 x를 사용하여 닫는 것은 포함되지 않습니다.
해결책
나는 그것을 찾았다!
다음 코드를 사용하여 닫기 이벤트를 포착할 수 있습니다.
$('div#popup_content').on('dialogclose', function(event) {
alert('closed');
});
분명히 내가 해야 할 일은 무엇이든 경고를 대체할 수 있습니다.
편집하다: Jquery 1.7부터 바인딩()이 on()이 되었습니다.
다른 팁
대화 상자를 작성하는 동안 (내가 한 프로젝트에서 복사)를 만들 수 있다고 생각합니다.
dialog = $('#dialog').dialog({
modal: true,
autoOpen: false,
width: 700,
height: 500,
minWidth: 700,
minHeight: 500,
position: ["center", 200],
close: CloseFunction,
overlay: {
opacity: 0.5,
background: "black"
}
});
메모 close: CloseFunction
$("#dialog").dialog({
autoOpen: false,
resizable: false,
width: 400,
height: 140,
modal: true,
buttons: {
"SUBMIT": function() {
$("form").submit();
},
"CANCEL": function() {
$(this).dialog("close");
}
},
**close: function() {
alert('close');
}**
});
$( "#dialogueForm" ).dialog({
autoOpen: false,
height: "auto",
width: "auto",
modal: true,
my: "center",
at: "center",
of: window,
close : function(){
// functionality goes here
}
});
대화 상자의 "Close"속성은 동일한 이벤트를 제공합니다.
당신도 이것을 시도 할 수 있습니다
$("#dialog").dialog({
autoOpen: false,
resizable: true,
height: 400,
width: 150,
position: 'center',
title: 'Term Sheet',
beforeClose: function(event, ui) {
console.log('Event Fire');
},
modal: true,
buttons: {
"Submit": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
이것이 나를 위해 일한 것입니다 ...
$('#dialog').live("dialogclose", function(){
//code to run on dialog close
});
jQuery 1.7 기준으로 .on () 메소드는 이벤트 핸들러를 문서에 첨부하는 데 선호되는 메소드입니다.
아무도 실제로 사용으로 답을 만들지 않았기 때문입니다.on()
대신에 bind()
나는 하나를 만들기로 결정했다.
$('div#dialog').on('dialogclose', function(event) {
//custom logic fired after dialog is closed.
});
샘플에서 '닫기'옵션 추가 샘플 아래에서 원하는 것을 수행하십시오.
close: function(e){
//do something
}
내가 말하는 창의 유형을 이해한다면 $ (Window) .unload () (대화 창의 경우) 필요한 후크를 제공합니까?
(그리고 내가 오해하고 팝업 브라우저 창이 아닌 CSS를 통해 만든 대화 상자에 대해 이야기하고 있다면 모두 그 창을 닫는 방법은 클릭 핸들러를 등록 할 수있는 요소입니다.)
편집하다: 아, 이제 CSS를 통해 만들어진 jQuery-UI 대화 상자에 대해 이야기하고 있습니다. 당신은 그것을 연결할 수 있습니다 엑스 클래스에 요소에 대한 클릭 핸들러를 등록하여 창을 닫습니다. UI-Dialog-Titlebar-Close.
더 유용한 것은 아마도 그것을 빨리 알아내는 방법을 알려줄 것입니다. 대화 상자를 표시하는 동안 Open Firebug 및 검사 창을 닫을 수있는 요소. 그들이 정의 된 방법과 클릭 핸들러를 등록하는 데 필요한 것을 즉시 알 수 있습니다.
따라서 귀하의 질문에 직접 답변하려면 답이 실제로 "아니요"라고 생각합니다. 가까운 이벤트가 없지만 "예"가 있습니다. 대화 상자를 상당히 쉽게 닫고 얻을 수있는 모든 방법을 연결할 수 있습니다. 당신이 원하는 것.
모든 항목에 대한 마감 이벤트를 캡처하기 위해 다음 코드를 시도 할 수 있습니다 : 페이지, 대화 상자 등.
$("#dialog").live('pagehide', function(event, ui) {
$(this).hide();
});