Jquery dialog modal not closing

jquery, jquery-ui

Solution

Your `$('button')` query should be more restrictive, otherwise it matches ALL `<button>` tags on the page, including those inside the jQuery dialog, causing it to keep opening.

I would suggest adding a class to your main button:

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

And then change your JavaScript to:

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

Problem

I have a dialog modal that is not closing when "save" or "cancel" are clicked. I have compared to jQuery UI's official demo page and can't seem to find why this would not be working. Here is what I have: ``` $(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> ```

Original source