Jquery对话框模式没有关闭

Question

当点击"保存"或"取消"时,我有一个没有关闭的对话框模式.我已经比较了jQuery UI的官方演示页面,似乎无法找到为什么这不起作用.

这是我有的:

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

您的$('button')查询应该更具限制性,否则它会匹配<button>页面上的所有标记,包括jQuery对话框中的标记,从而导致它保持打开状态.

我建议在主按钮中添加一个类:

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

然后将您的JavaScript更改为:

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