jquery-ui-hộp thoại - Cách móc vào sự kiện đóng hộp thoại

Tôi đang sử dụng jquery-ui-dialog plugin

Tôi đang tìm cách để làm mới trang khi trong một số trường hợp khi hộp thoại được đóng lại.

Có cách nào để chụp một sự kiện gần từ hộp thoại không?

Tôi biết tôi có thể chạy mã khi nhấp vào nút đóng nhưng điều đó không bao gồm việc người dùng đóng bằng thoát hoặc x ở góc trên cùng bên phải.

Tôi đã tìm thấy nó!

Bạn có thể bắt sự kiện gần bằng mã sau:

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

Rõ ràng tôi có thể thay thế cảnh báo bằng bất cứ điều gì tôi cần làm.
Chỉnh sửa: Kể từ Jquery 1.7, liên kết () đã trở thành ()

Tôi tin rằng bạn cũng có thể làm điều đó trong khi tạo hộp thoại (được sao chép từ một dự án tôi đã làm):

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

Ghi chú 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
              }  
              });

thuộc tính "đóng" của hộp thoại cung cấp cho sự kiện gần giống nhau.

Bạn cũng có thể thử cái này

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

Đây là những gì làm việc cho tôi...

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

Kể từ jQuery 1.7, phương thức .on () là phương thức ưa thích để đính kèm các trình xử lý sự kiện vào tài liệu.

Bởi vì không ai thực sự tạo ra một câu trả lời với việc sử dụng. on()thay vì bind()tôi quyết định tạo ra một.

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

thêm tùy chọn 'đóng' như dưới mẫu và làm những gì bạn muốn chức năng nội tuyến

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

Nếu tôi hiểu loại cửa sổ mà bạn đang nói đến, sẽ không $ (cửa sổ) .unload () (cho cửa sổ hộp thoại) có cung cấp cho bạn cái móc bạn cần không?

(Và nếu tôi hiểu nhầm và bạn đang nói về một hộp thoại được tạo thông qua CSS chứ không phải cửa sổ trình duyệt bật lên, thì tất cả các cách đóng cửa sổ đó là các yếu tố bạn có thể đăng ký xử lý nhấp chuột.)

Chỉnh sửa: Ah, tôi thấy bây giờ bạn đang nói về các hộp thoại jquery-ui, được thực hiện thông qua CSS. Bạn có thể móc X đóng cửa sổ bằng cách đăng ký trình xử lý nhấp chuột cho phần tử với lớp ui-hộp thoại-titlebar-close .

Hữu ích hơn, có lẽ, là cho bạn biết làm thế nào để tìm ra điều đó một cách nhanh chóng. Trong khi hiển thị hộp thoại, chỉ cần mở FireBug và Kiểm tra các yếu tố có thể đóng cửa sổ. Bạn sẽ ngay lập tức thấy cách chúng được xác định và cung cấp cho bạn những gì bạn cần để đăng ký trình xử lý nhấp chuột.

Vì vậy, để trả lời trực tiếp câu hỏi của bạn, tôi tin rằng câu trả lời thực sự là "không" - không có sự kiện gần gũi nào bạn có thể câu, nhưng "có" - bạn có thể móc tất cả các cách để đóng hộp thoại khá dễ dàng và nhận được bạn muốn gì.

Bạn có thể thử đoạn mã sau để chụp sự kiện kết thúc cho bất kỳ mục nào: trang, hộp thoại, v.v.

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