Modem dialogowy Jquery nie zamykający się

Question

Mam modalny dialog, który nie zamyka się po kliknięciu "zapisz" lub "anuluj". W porównaniu do jQuery UI's official demo page i nie mogę znaleźć, dlaczego to nie działa.

Oto co mam:

$(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

Twój $('button') zapytania powinny być bardziej restrykcyjne, inaczej dopasowuje wszystkie <button> tagi na stronie, w tym wewnątrz okna dialogowego jQuery , powodując jego otwarcie.

Proponuję dodanie klasy do głównego przycisku:

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

a następnie zmienić swoje JavaScript do:

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

Answer 2

Spróbuj użyć:

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

Zamiast:

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