jquery-ui-dialog - วิธีเชื่อมต่อกับเหตุการณ์ปิดไดอะล็อก

ฉันใช้jquery-ui-dialogปลั๊กอิน

ฉันกำลังมองหาวิธีรีเฟรชหน้าเมื่ออยู่ในบางสถานการณ์เมื่อปิดกล่องโต้ตอบ

มีวิธีในการจับภาพเหตุการณ์ปิดจากกล่องโต้ตอบหรือไม่?

ฉันรู้ว่าฉันสามารถเรียกใช้รหัสได้เมื่อคลิกปุ่มปิด แต่ไม่ครอบคลุมการปิดผู้ใช้ด้วยการยกเว้นหรือ x ที่มุมบนขวา

ฉันได้พบมัน!

คุณสามารถจับเหตุการณ์ปิดโดยใช้รหัสต่อไปนี้:

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

เห็นได้ชัดว่าฉันสามารถแทนที่การแจ้งเตือนด้วยสิ่งที่ฉันต้องทำ
แก้ไข:ตั้งแต่วันที่ Jquery 1.7 การผูก () ได้กลายเป็น ()

ฉันเชื่อว่าคุณสามารถทำได้ในขณะที่สร้างกล่องโต้ตอบ (คัดลอกมาจากโครงการที่ฉันทำ):

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 มากกว่าป๊อปอัพหน้าต่างเบราว์เซอร์แล้วทุกวิธีการปิดหน้าต่างที่เป็นองค์ประกอบคุณสามารถลงทะเบียนคลิก handers สำหรับ.)

แก้ไข:อ่าฉันเห็นแล้วว่าตอนนี้คุณกำลังพูดถึงกล่องโต้ตอบ jquery-ui ซึ่งทำผ่าน CSS คุณสามารถเบ็ดXซึ่งปิดหน้าต่างโดยการลงทะเบียนจัดการคลิกสำหรับองค์ประกอบที่มีระดับUI-โต้ตอบ titlebar อย่างใกล้ชิด

บางทีอาจมีประโยชน์มากกว่านี้คือคุณบอกวิธีคิดอย่างรวดเร็ว ขณะที่แสดงกล่องโต้ตอบให้เปิดป๊อปอัพ FireBug และตรวจสอบองค์ประกอบที่สามารถปิดหน้าต่างได้ คุณจะเห็นวิธีการกำหนดและให้สิ่งที่คุณต้องการในการลงทะเบียนตัวจัดการการคลิก

ดังนั้นเพื่อตอบคำถามของคุณโดยตรงฉันเชื่อว่าคำตอบคือ "ไม่" จริงๆ - ไม่มีเหตุการณ์ปิดที่คุณสามารถขอได้ แต่ "ใช่" - คุณสามารถขอทุกวิธีในการปิดกล่องโต้ตอบได้อย่างง่ายดายและรับ คุณต้องการอะไร.

คุณอาจลองใช้รหัสต่อไปนี้เพื่อจับภาพเหตุการณ์การปิดสำหรับรายการใด ๆ : หน้า, กล่องโต้ตอบ ฯลฯ

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