单击确定按钮或 X（关闭）后如何删除 JQuery 对话框内容？

Question

我已经创建了创建对话框的 JQuery 函数。可以在函数中传递的参数很少，例如 HTML 内容、标题、宽度、高度。当我点击 OK 按钮或 X 按钮时，我开始更多地查看屏幕后面发生的事情。我看到对话框设置为display:none。所有内容都保留在屏幕上。在我单击下一个应该调用对话框的函数后，我看到创建了新的 HTML 内容。我想知道关闭后如何清除对话框的比赛？这是我的对话框功能：

$.extend({ 
    alert: function (message, title, height, width, print) {
        var dialogButtons = {
            "Ok": function() {
                $(this).remove();
            }
        };

        if (print) dialogButtons.Print = function() {
            $(this).dialog().printArea();
        };

        $("<div></div>").dialog( {
            buttons: dialogButtons,
            close: function (event, ui) { $(this).hide(); },
            resizable: false,
            title: title,
            modal: true,
            width: height,
            height: width,
            overflow:"auto",
            position: {
                    my: "center",
                    at: "center",
                    of: window
            }
        }).html(message);
    }
}); 

这是我如何调用此函数的示例：

<div id="container">
   Some HTML 
</div>

//Call that creates dialog box
var divID = $('#container').show();
$.alert(divID,'Form Input',800,600);

关闭对话框后，我在屏幕后面看到以下内容：

<div style="height: auto; width: 600px; top: 0px; left: 655.8px; z-index: 101; display: none;" tabindex="-1" role="dialog" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-dialog-buttons ui-draggable" aria-describedby="ui-id-1" aria-labelledby="ui-id-2"><div class="ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix ui-draggable-handle"><span id="ui-id-2" class="ui-dialog-title">Form Input</span><button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" title="Close"><span class="ui-button-icon ui-icon ui-icon-closethick"></span><span class="ui-button-icon-space"> </span>Close</button></div><div id="ui-id-1" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; max-height: none; height: 468px; display: none;"></div><div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><button type="button" class="ui-button ui-corner-all ui-widget">Ok</button></div></div></div>

这是我再次单击将打开对话框的按钮后的内容：

<div style="height: auto; width: 600px; top: 0px; left: 655.8px; z-index: 101;" tabindex="-1" role="dialog" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-dialog-buttons ui-draggable" aria-describedby="ui-id-9" aria-labelledby="ui-id-10"><div class="ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix ui-draggable-handle"><span id="ui-id-10" class="ui-dialog-title">Form Input</span><button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" title="Close"><span class="ui-button-icon ui-icon ui-icon-closethick"></span><span class="ui-button-icon-space"> </span>Close</button></div><div id="ui-id-9" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; max-height: none; height: 468px;"><div id="container" style="display: block;">
</div></div><div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><button type="button" class="ui-button ui-corner-all ui-widget">Ok</button></div></div></div>

这是对话框创建新 html 并将上一个设置为 display:none 的正常方式还是我的函数中有一些错误？

Answer 1

解决这个问题的常用方法是在 HTML 中添加一个 DIV，并使用它而不是动态地构造一个新的 DIV。它的 CSS 应该是 display: none;，所以在你显示对话框之前它是不可见的。

如果你不能这样做，你可以将 DIV 保存在一个变量中，然后重复使用它。

然后在不使用的时候使用$(this).dialog("close") 隐藏它。

var dialogDiv;
$.extend({ 
    alert: function (message, title, height, width, print) {
        var dialogButtons = {
            "Ok": function() {
                $(this).dialog("close");
            }
        };

        if (print) dialogButtons.Print = function() {
            $(this).dialog().printArea();
        };

        if (!dialogDiv) {
            dialogDiv = $("<div>"); 
        }   
        dialogDiv.dialog( {
            buttons: dialogButtons,
            resizable: false,
            title: title,
            modal: true,
            width: height,
            height: width,
            overflow:"auto",
            position: {
                    my: "center",
                    at: "center",
                    of: window
            }
        }).html(message);
    }
}); 

不需要close: 选项，因为关闭对话框是默认操作。

DEMO