Jquery dialog modal not closing

Question

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>

Answer 1

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