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

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

플러그인을 사용하고 있습니다.

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

대화 상자에서 근접 이벤트를 캡처할 수 있는 방법이 있습니까?

닫기 버튼을 클릭하면 코드를 실행할 수 있지만, 이스케이프로 닫는 사용자나 오른쪽 상단 모서리의 x는 포함되지 않습니다.

찾았어요!

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

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

당연히 경보를 필요한 것으로 대체할 수 있습니다.
편집: Jquery 1.7 기준으로 bind()는 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
              }  
              });

대화 상자의 "닫기" 속성은 동일한 이벤트에 대한 닫힘 이벤트를 제공합니다.

당신도 이것을 시도할 수 있습니다.

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

제가 당신이 말하는 윈도우의 종류를 이해하고 있다면 $(윈도우)가 아닐까요?unload » (대화창용)는 필요한 후크를 제공합니까?

(그리고 내가 오해했는데, 당신이 팝업 브라우저 창이 아닌 CSS를 통해 만들어진 대화 상자를 말하는 것이라면, 그 창을 닫는 모든 방법은 당신이 클릭 핸들러를 등록할 수 있는 요소입니다.)

편집: 아, 이제 당신이 CSS를 통해 만들어진 jquery-ui 대화상자에 대해 이야기하는 것을 알았습니다.요소에 대한 클릭 핸들러를 클래스 ui-dialog-titlebar-close에 등록하여 창을 닫는 X를 후크할 수 있습니다.

더 유용한 것은, 여러분이 그것을 빨리 알아내는 방법을 알려주는 것입니다.대화 상자를 표시하는 동안 FireBug를 열고 창을 닫을 수 있는 요소를 검사하기만 하면 됩니다.클릭 핸들러를 등록하는 데 필요한 정보를 제공하는 사용자 정의 방법을 즉시 확인할 수 있습니다.

그래서 여러분의 질문에 직접적으로 대답하자면, 저는 대답이 정말 "아니오"라고 믿습니다. 여러분이 낚을 수 있는 근접한 사건은 없지만, "네"라는 것입니다. 여러분은 대화상자를 아주 쉽게 닫고 원하는 것을 얻을 수 있는 모든 방법을 낚싯바늘을 걸 수 있습니다.

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

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

언급URL : https://stackoverflow.com/questions/171928/jquery-ui-dialog-how-to-hook-into-dialog-close-event