如何将 jQuery 对话框定位到中心？

https://stackoverflow.com/questions/1839702

12-09-2019
|

题

我尝试过以下代码，但它仅将对话框左上角位置定位到中心，这使得元素向右对齐。如何将对话框居中到计算元素宽度的真实中心，以便中心线将对话框切成 50% 50% 的一半？

$('.selector').dialog({ position: 'center' });

http://docs.jquery.com/UI/Dialog#option-position

解决方案

我很确定你不需要设置一个位置：

$("#dialog").dialog();

该中心通过默认.

我没有看一看的文章，并且还检查它说什么的官方jquery-ui网站关于定位的话 :并且在它进行了讨论2国：初始化和之后的初始化.

代码示例(从技2009-12-03)

初始化对话的位置的选项规定。

$('.selector').dialog({ position: 'top' });

获取或设定的位置的选择，后init。

//getter
var position = $('.selector').dialog('option', 'position');
//setter
$('.selector').dialog('option', 'position', 'top');

我认为，如果要删除的位置属性的，你会找到它的中心通过本身的其他尝试的第二器选项，其定义的3个元素的"选项"的"职位"和"中心"。

其他提示

在最新的jQuery UI具有位置成分：

$("#myDialog").position({
   my: "center",
   at: "center",
   of: window
});

文档： http://jqueryui.com/demos/position/ 结果得到： http://jqueryui.com/download

由于该对话框需要的位置，你需要包括JS位置

<script src="jquery.ui.position.js"></script>

因此，如果有人点击该页面像我一样，或者当我在15分钟内忘记，我使用jQueryUI的对话框版本1.10.1和jQuery 1.9.1与IE8在iframe（废话），它需要一个内指定的或不工作的，即

position: {
 my: "center bottom",
 at: "center top",
 of: $("#submitbutton"),
 within: $(".content")
}

由于@ vm370指着我在正确的方向。

open: function () {

    var win = $(window);

    $(this).parent().css({
        position: 'absolute',
        left: (win.width() - $(this).parent().outerWidth()) / 2,
        top: (win.height() - $(this).parent().outerHeight()) / 2
    });
}

要解决的中心位置，我使用：

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}

试试这个....

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});

我得到了最好的结果，将 jQuery 对话框放在浏览器窗口的中心：

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

可能有更准确的方法来使用选项来定位它“使用“如文档中所述 http://api.jqueryui.com/position/ 但我很着急...

我要调用函数dialog()两次到对话框位置（jQuery的v1.11.2 / jQueryUI的v1.10.4）。

$("#myDialog").dialog({
    /* initial dialog parameters */
}).dialog({
    position: {
        my: "center center",
        at: "center center",
        of: window
    }
});

以下位置参数为我工作

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

祝你好运！

Jquery UI 1.9.2, 能力和以后的版本不支持IE8

我找到了两种解决方案。

回滚到 jquery UI 1.7.2 支持IE8,
试试这个代码 Jquery UI 1.9.2

position: {my: "center",  at: "center", of: $("body"),within: $("body") }

根据以下讨论，这个问题可能是由于在较新的版本的jQuery少IE兼容性，回复到1.7.2似乎解决的问题，这仅发生在IE8。 http://forum.jquery.com /主题/ jquery的-UI-对话框定位 - 不工作 - 在-IE-8

另一件事情，可以给你的地狱使用jQuery对话框定位，尤其是比浏览器中查看端口较大的文档 - 您必须添加的声明

<!DOCTYPE html>

在文档的顶部。

如果没有它，jQuery的倾向于把对话框上的页面和错误的底部试图拖动它时，可能会出现。

如果您使用的是单独的jQuery的文件或自定义的jQuery下载两种方式确保你也有jquery.ui.position.js添加到您的网页。

您运行到这个只在IE浏览器？如果是这样，你可以添加以下到您的网页的HEAD标签的第一行：

<meta http-equiv="X-UA-Compatible" content="IE=7" />

我虽然所有的兼容性问题被固定在后jQueries，但我遇到了这个一个今天。

试试这个旧版本，有人不希望使用位置谁：

$("#dialog-div-id").dialog({position: ['center', 'top'],....

您也需要做的，如果使用在移动设备上jQuery用户界面手动重新定心 - 对话框经由“左＆”顶部的CSS属性手动定位。如果用户切换取向，定位就不再集中，并且必须适应/之后重新定中心。

有关的Win7 / IE9环境在你的CSS文件只是设置：

.ui-dialog {
   top: 100px;
   left: 350px !important;
}

我曾与这个问题，我终于了这一点。直到今天我使用的是真正的老版本的jQuery，1.8.2版本。

到处其中我已经使用dialog我曾与以下位置选项初始化它：

$.dialog({
    position: "center"
});

但是，我发现，除去position: "center"或与正确的语法替换它没有这样做的特技，例如：

$.dialog({
    position: {
       my: "center",
       at: "center",
       of: window
    }
});

虽然以上是正确的，我还使用option到设定的位置为中心，当我加载网页，以旧的方式，如下所示：

// The wrong old way of keeping a dialog centered
passwordDialogInstance.dialog("option", "position", "center");

这是造成我所有的对话框窗口坚持视口的左上角。

我与下面的正确新语法，以取代此所有实例：

passwordDialogInstance.dialog(
    "option",
    "position", 
    { my: "center", at: "center", of: window }
);

予固定的CSS：

.ui-dialog .ui-dialog-content {
  width: 975px!important;
  height: 685px!important;
  position: fixed;
  top: 5%;
  left: 50%;
  margin:0 0 0 -488px;
}

无法IE9居中对话框。

通过将该的CSS固定它：

.ui-dialog {
    left:1%;
    right:1%;
}

百分比并不重要。任何数量少的工作。

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow