javascript - 单击“确定”按钮或 X(关闭)后如何删除 JQuery 对话框内容？

Question

我已经创建了创建对话框的 JQuery 函数。函数中可以传递的参数很少，例如 HTML 内容、标题、宽度、高度。当我单击“确定”按钮或“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 并将 previous 设置为 display:none 的正常方式吗？或者我的函数中有一些错误？

Answer 1

解决此问题的常用方法是将 DIV 添加到 HTML，并使用它而不是动态构造新的 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