如何将jQuery对话框置于中心位置？

Question

我尝试过跟随代码,但它只将对话框的左上角位置放在中心位置,这样就可以将元素对齐到右边.如何将对话框置于计算元素宽度的实际中心,以便中心线将对话框切换到50%50%的半边？

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

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

Answer 1

最新的jQuery UI有一个位置组件:

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

Doc:http://jqueryui.com/demos/position/
获取:http://jqueryui.com/download

Answer 2

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

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

应默认居中.

我确实看过这篇文章,并检查了官方jquery-ui网站上关于定位对话框的内容:在其中讨论了两种状态:初始化和初始化之后.

代码示例 - (取自jQuery UI 2009-12-03)

使用指定的位置选项初始化对话框.

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

在init之后获取或设置位置选项.

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

我认为,如果您要删除位置属性,您会发现它自己居中,否则请尝试第二个setter选项,您可以在其中定义"option""position"和"center"的3个元素.

Answer 3

因为对话框需要一个位置,所以需要包含js位置

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

Answer 4

因此,如果有人像我一样点击这个页面,或者当我在15分钟内忘记时,我在iframe(blah)中使用jqueryui对话版本1.10.1和jquery 1.9.1与ie8,它需要在指定的内部或它不起作用,即

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

感谢@ vm370让我指向正确的方向.

Answer 5

open: function () {

    var win = $(window);

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

Answer 6

要修复中心位置,我使用:

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

Answer 7

试试这个....

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

Answer 8

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

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

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

Answer 9

Jquery UI 1.9.2, jquery及以后的版本不支持IE8

我找到了两个解决方案。

1. 回滚jquery UI 1.7.2到支持IE8，

2. 试试这个代码 Jquery UI 1.9.2

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

Answer 10

我必须调用函数dialog()两次来定位对话框(jQuery v1.11.2/jQueryUI v1.10.4).

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