Jquery dialog modal not closing

Question

Tengo un diálogo modal que no se cierra cuando se hace clic en "guardar" o "cancelar". He comparado con jQuery UI's official demo page y no puedo encontrar por qué esto no estaría funcionando.

Aquí es lo que tengo:

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

Su consulta $('button') debe ser más restrictiva, de lo contrario, coincide con todos los <button> etiquetas en la página, incluyendo los que están dentro del cuadro de diálogo jQuery , haciendo que siga abriéndose.

que sugeriría la adición de una clase a su botón principal:

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

Y luego cambia de JavaScript para:

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

Answer 2

Trate de usar:

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

En lugar de:

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