将位置设置为中心后，jquery ui对话框未显示在窗口中心答案

【问题标题】：jquery ui dialog not showing in center of window after setting position to center将位置设置为中心后，jquery ui对话框未显示在窗口中心
【发布时间】：2014-05-16 22:10:58
【问题描述】：

我是 jquery ui 对话框的新手。我在我的 MVC 网站中使用了对话框。

我将我的对话框容器放在body标签内的布局页面中，如下所示-

 <div id="dialogBox"></div>

然后在我的视图页面上，我有一个 ID 为 aMyProfile 的按钮并编写了用于打开我的对话框的 jquery 代码。

aMyProfile 的 html 代码 -

<input type="button" id="aMyProfile" data-url="@Url.Action("UserProfileContainer","User")" value="View Profile"/>

aMyProfile 的 Jquery 代码-

$('#aMyProfile').click(function () {
            var currentURL = $(this).attr('data-url');
            $('#dialogBox').load(currentURL, function () {
                $('#dialogBox').dialog("open");
            });
        });

和对话框初始化as-

$('#dialogBox').dialog({
        bgiframe: true,
        modal: true,
        autoOpen: false,
        closeOnEscape: false,
        position: 'center',
        resizable: false,
        title: 'Profile',
        width: 750
    });

以上所有jquery代码都在$(document).ready(function () {});

当我执行我的项目时，它给我的输出是 -

我的对话框没有出现在窗口的中心。即使我将位置设置为中心。

我不明白我哪里错了。

【问题讨论】：

标签： asp.net-mvc jquery-ui jquery-ui-dialog

【解决方案1】：

您指定的位置值错误。应该是这样的：

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

在任何情况下，位置的默认值都是居中对齐的，所以只需将其删除即可。

http://api.jqueryui.com/dialog/#option-position

【讨论】：

您的内容的高度是多少？查看屏幕截图，页面上似乎没有太多内容。如果您没有任何内容推动 body 的高度，我不确定它是否会对齐。

【解决方案2】：

我刚刚遇到了同样的问题。检查事项：

确保您的应用程序中有 /Scripts/jquery.ui.position.js，如果没有，请转到此处

http://jqueryui.com/download/ 并下载它，你会发现它在

\jquery-ui-1.10.4.custom\jquery-ui-1.10.4.custom\development-bundle\ui\jquery.ui.position.js

在 App_Start/BundleConfig.cs 中更改您的 jqueryui 包配置：

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js"                     
                    ));

到这里：

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js",
                    "~/Scripts/jquery.ui.position.js"
                    ));

这应该对它进行排序。

【讨论】：