Question

我在点击时打开一个jQuery UI对话框，我需要对话框定位在屏幕/浏览器的可视部分的中心。

jQuery对话框的默认位置将对话框放在页面中央：

position: { my: "center", at: "center", of: window }

但我加载对话框的页面非常长，带有滚动条，因此当我点击它时，对话框首先出现在页面的一半。

有关如何将对话框置于屏幕可视部分中心的任何想法？

用于创建和打开jQuery UI对话框的Javascript：

$(document).ready(function () {
    $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        title: "Item Edit",
        buttons: {
            "Save": function (e) {
                $('input#<%=btnSave.ClientID %>').click();
                $(this).dialog("close");
                location.reload();
            }
        }
    });

    $(".item").on("click", function () {
        var itemId = $(this).attr("itemId");
        var url = window.location.protocol + "//" + window.location.host + 
                  "/ItemEdit.aspx?itemId=" + itemId;
        $("#dialog").load(url);
        $("#dialog").dialog("open");
        return false;
    });
});

我正在使用jQuery 1.11.1和jQuery UI 1.11.1，下面的小提琴演示似乎工作正常，但jQuery版本不一样。主要思想是当页面上有垂直滚动条时，对话框上的默认中心定位不起作用。

JSFiddle演示 - http://jsfiddle.net/t2zf7xow/6/

将jQuery UI对话框放在可视屏幕的中心？

0 个答案: