UI 对话框多次打开

Question

我在点击按钮时打开对话框，如果我点击了多次，那么对话框会打开两次。我不希望出现最上面的小对话框，我只需要后面的对话框。 两个对话框中都显示相同的数据。 见附图

我正在使用下面的代码

$(document).ready(function () {

    $("#policyDialog").html("");
    $('#policyDialog').dialog({
        autoOpen: false,
    });
});

function onViewDetails(policyID) {
    var policyID = policyID;
    var policydetaildialog = "";
    var title = "title";

    $(".loading").css({
        'display': 'block'
    });
    $('#policyDialog').dialog({
        width: 1000,
        autoResize: false,
        draggable: false,
        hide: null,
        modal: true,
        height: "auto",
        maxHeight: 500,
        maxWidth: 1000,
        minHeight: 450,
        minWidth: 450,
        title: title,
        close: function (e) {
            //e.preventDefault();
        }
    });
    $.ajax({
        type: 'POST',
        url: "xyz.jsp",
        data: {
            dataID: policyID
        },
        success: function (response) {
            //$("#policyDialog").html(response);
            policydetaildialog = response;
            $("#policyDialog").dialog('open');
            //$("#policyDialog").html(policydetaildialog);
            $("#policyDialog").html(response);
        },
        dataType: "html",
        async: false
    });

    /* $("#policyDialog").dialog('open');
            $("#policyDialog").html(policydetaildialog);
            return false; */

    //$("#policyDialog");

    //$('#viewDetail').prop('disabled', true);
}

我在下面调用了这个函数

<button type="button" class="btn" id="viewDetail" onclick="onViewDetails('<%=policy.getPolicyId()%>');">View details</button>

下面是我的html

<div id="policyDialog"></div>

---

还请查看以下屏幕截图：

Answer 1

您无需在每次单击按钮时都创建另一个对话框。

将您的对话框声明移出点击处理程序：

var _PolicyDialog;
$(document).ready(function () {
    $("#policyDialog").html("");
    _PolicyDialog=$('#policyDialog').dialog({
        autoOpen: false,
        width: 1000,
        autoResize: false,
        draggable: false,
        hide: null,
        modal: true,
        height: "auto",
        maxHeight: 500,
        maxWidth: 1000,
        minHeight: 450,
        minWidth: 450,
        title: title,
        close: function (e) {
            //e.preventDefault();
        }
    });
});

在你的 ajax 函数中，打开这样的对话框：

_PolicyDialog.dialog("open");

看看这个Example