jquery-ui-dialog-대화 상자 닫기 이벤트에 연결하는 방법


186

jquery-ui-dialog플러그인을 사용하고 있습니다

일부 상황에서 대화 상자가 닫힐 때 페이지를 새로 고치는 방법을 찾고 있습니다.

대화 상자에서 닫기 이벤트를 캡처하는 방법이 있습니까?

닫기 버튼을 클릭하면 코드를 실행할 수 있지만 오른쪽 상단의 x 또는 x로 닫는 사용자를 다루지 않습니다.

답변:


248

찾았습니다!

다음 코드를 사용하여 close 이벤트를 잡을 수 있습니다.

 $('div#popup_content').on('dialogclose', function(event) {
     alert('closed');
 });

분명히 나는 ​​내가해야 할 일로 경고를 바꿀 수 있습니다.
편집 : Jquery 1.7부터 bind ()가 on ()되었습니다.


3
오타 : $ ( 'div # popup_content'). bind ( 'dialogclose', function (event)) {...}
CFNinja

1
이것은 도움이되지만 $('div#popup_content')옳습니까? 이 대화 상자가 다음과 같이 jQuery.fn.dialog.open({})
열린다

대화 상자가 먼저 닫히고 경고가 나타납니다. 모든 사람과 동일한 상황이라면 경고가 먼저 나타나고 확인을 클릭하면 창이 닫힙니다. 저를 수정 ....
changeme

5
이제는 사용되지 않는 bind () 대신 on ()을 사용하도록 업데이트해야합니다.
RBZ

2
페이지에서 jQuery UI 대화 상자를 열지 않은 경우 오버레이 div가 DOM에 존재하지 않습니다. 따라서 대신 다음과 같은 작업을 고려할 수 있습니다.$('body').on('dialogclose', '.ui-dialog', function(){...});
thdoan

192

대화 상자를 만들면서도 할 수 있다고 생각합니다 (내가 한 프로젝트에서 복사).

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


9
이 대답은 받아 들인 대답보다 더 정확합니다. 또한 올바른 API 설명서는 여기에서 찾을 수 있습니다. api.jqueryui.com/dialog/#event-close
Chris Gillum

2
Jake N-실제로 작동하려면 'CloseFunction'이라는 대화 상자에 액세스 할 수있는 함수를 작성해야합니다. 예를 들어 바로 위에 쓸 수 있습니다. var CloseFunction = function() { //Do your custom closing stuff here };
Adam Diament

이것은 옵션이지만 코드가 다른 장소에서 사용되고 있습니다. 선택한 답변은 다른 상황에서 다른 동작을 추가하고 대화 상자 작성 코드를 재사용하여 표준화를 원할 때 효과적입니다.
NectarSoft

당신은 overlay두 번 있습니다. 그럴 필요가 없습니까?
radbyx

1
이것은 효과가 있으며 여기에 반드시 필요하고 유용한 대답이지만 X 또는 무언가로 닫을 때뿐만 아니라 어떤 방법으로 대화 상자를 닫을 때마다 CloseFunction 코드를 실행합니다. 따라서 X 또는 취소 버튼으로 대화 상자를 닫을 때 특정 코드를 실행하고 싶지만 제출 된 입력이 올바른 것으로 확인 된 경우와 같이 다른 일로 닫히지 않으면이 코드가 실행되지 않습니다. 작업.
mikato

31
$("#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');
    }
});

21
$( "#dialogueForm" ).dialog({
              autoOpen: false,
              height: "auto",
              width: "auto",
              modal: true,
                my: "center",
                at: "center",
                of: window,
              close : function(){
                  // functionality goes here
              }  
              });

dialog의 "close"속성은 close 이벤트를 제공합니다.


16

U는 이것을 시도 할 수도 있습니다

$("#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");
                }
            }
        });

10

이것이 나를 위해 일한 것입니다 ...

$('#dialog').live("dialogclose", function(){
   //code to run on dialog close
});

8

jQuery 1.7부터 .on () 메소드는 문서에 이벤트 핸들러를 첨부하는 데 선호되는 메소드입니다.

아무도를 사용하여 실제로 답변을 만들지 않았기 때문에. on()대신에 bind()하나를 만들기로 결정했습니다.

$('div#dialog').on('dialogclose', function(event) {
     //custom logic fired after dialog is closed.  
});

6

샘플과 같이 옵션 '닫기'를 추가하고 원하는 인라인 기능을 수행하십시오.

close: function(e){
    //do something
}

4

내가 말하는 창 유형을 이해하고 있다면 $ (window) .unload () (대화 상자 창)가 필요한 후크를 제공하지 않습니까?

(그리고 내가 잘못 이해하고 팝업 브라우저 창 대신 CSS를 통해 만든 대화 상자에 대해 이야기하고 있다면 해당 창을 닫는 모든 방법은 클릭 처리기를 등록 할 수있는 요소입니다.)

편집 : 아, CSS를 통해 작성된 jquery-ui 대화 상자에 대해 이야기하고 있습니다. ui-dialog-titlebar-close 클래스에 요소에 대한 클릭 핸들러를 등록하여 창을 닫는 X 를 후크 할 수 있습니다 .

아마도 더 유용 할 것입니다. 빠르게 알아내는 방법을 알려주는 것입니다. 대화 상자를 표시하는 동안 FireBug를 열고 창을 닫을 수있는 요소를 검사 하십시오. 그것들이 어떻게 정의되어 있는지 즉시 확인할 수 있으며 클릭 핸들러를 등록하는 데 필요한 것을 제공합니다.

따라서 귀하의 질문에 직접 대답하기 위해 대답은 실제로 "아니오"라고 생각합니다. 가까운 이벤트가 없지만 "예"입니다. 대화 상자를 상당히 쉽게 닫고 가져 오는 모든 방법을 사용할 수 있습니다. 당신이 원하는 것.


앤디 CSS와 자바 스크립트를 통해 작성된 jquery-ui의 대화 상자를 사용하고 있습니다. 코드를 살펴보면 거기에 갈고리가 있다고 생각하지만 그것을 얻는 방법을 모르겠습니다.
브라우니

2

페이지, 대화 상자 등 모든 항목에 대한 마감 이벤트를 캡처하기 위해 다음 코드를 시도 할 수 있습니다.

$("#dialog").live('pagehide', function(event, ui) {
      $(this).hide();
});

1
.live () 또는 .bind () 대신 .on ()을 사용하십시오
cssyphus
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.