Phương thức hộp thoại Jquery không đóng

Question

Tôi có một phương thức hộp thoại không đóng khi nhấn "lưu" hoặc "hủy". Tôi đã so sánh với jQuery UI's official demo page và dường như không thể tìm thấy lý do tại sao điều này sẽ không hoạt động.

Dưới đây là những gì tôi có:

$(function() { 
      $("#DetailsWindow").dialog({ 
       autoOpen: false, 
       resizable: false, 
       height: 500, 
       width: 600, 
       modal: true, 
       title: 'Appointment Details', 
       buttons: { 
        "Save": function() { 
         $(this).dialog("close"); 
        }, 
        "Cancel": function() { 
         $(this).dialog("close"); 
        } 
       } 
      }); 

      $('button').click(function() { 
       $("#DetailsWindow").dialog("open"); 
      }); 
     }); 

HTML:

<button>A button</button> 
     <div id="DetailsWindow"> 
      <h3>Title</h3> 
      <span>Some Text</span> 
     </div> 

Answer 1

truy vấn $('button') của bạn nên được hạn chế hơn, nếu không nó phù hợp với TẤT CẢ <button> thẻ trên trang web, bao gồm cả những người bên trong hộp thoại jQuery , khiến nó tiếp tục mở.

tôi sẽ đề nghị bổ sung thêm một lớp học để nút chính của bạn:

<button class="open-details">A button</button> 

Và sau đó thay đổi của bạn hoạt Javascript để:

$('button.open-details').click(function() { 
    $("#DetailsWindow").dialog("open"); 
}); 

Answer 2

Thử sử dụng:

$(this).dialog('destroy').remove(); 

Thay vì:

$(this).dialog("close");