How can I position my jQuery dialog to center?

2019-01-11 05:15发布

站内问答 / jQuery
1206 21 5

I have tried following code, but it only positions dialogs left upper corner position to center, and that makes element to be aligned to right. How can I center dialog to real center which counts elements width, so that center line will cut dialog to 50% 50% halfs?

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

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

21条回答
甜甜的少女心
2楼-- · 2019-01-11 05:51

I'm pretty sure you shouldn't need to set a position:

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

should center by default.

I did have a look at the article, and also checked what it says on the official jquery-ui site about positioning a dialog : and in it were discussed 2 states of: initialise and after initialise.

Code examples - (taken from jQuery UI 2009-12-03)

Initialize a dialog with the position option specified.

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

Get or set the position option, after init.

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

I think that if you were to remove the position attribute you would find it centers by itself else try the second setter option where you define 3 elements of "option" "position" and "center".

查看更多
0人赞 添加讨论(0) 举报
干净又极端
3楼-- · 2019-01-11 05:52

So if anyone hits this page like I did, or for when I forget in 15 minutes, I'm using jqueryui dialog version 1.10.1 and jquery 1.9.1 with ie8 in an iframe(blah), and it needs a within specified or it doesn't work, i.e.

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

Thanks to @vm370 for pointing me in the right direction.

查看更多
0人赞 添加讨论(0) 举报
男人必须洒脱
4楼-- · 2019-01-11 05:52

Try this....

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});
查看更多
0人赞 添加讨论(0) 举报
女痞
5楼-- · 2019-01-11 05:52

I have to call function dialog() twice to position the dialog (jQuery v1.11.2 / jQueryUI v1.10.4).

$("#myDialog").dialog({
    /* initial dialog parameters */
}).dialog({
    position: {
        my: "center center",
        at: "center center",
        of: window
    }
});
查看更多
0人赞 添加讨论(0) 举报
甜甜的少女心
6楼-- · 2019-01-11 05:53

Jquery UI 1.9.2, jquery and the later versions don' support IE8

I found two solutions for that.

  1. Rollback to jquery UI 1.7.2 to support IE8,

  2. Try this code with Jquery UI 1.9.2 

position: {my: "center",  at: "center", of: $("body"),within: $("body") }
查看更多
0人赞 添加讨论(0) 举报
一纸荒年 Trace。
7楼-- · 2019-01-11 05:53

Another thing that can give you hell with JQuery Dialog positioning, especially for documents larger than the browser view port - you must add the declaration

<!DOCTYPE html>

At the top of your document.

Without it, jquery tends to put the dialog on the bottom of the page and errors may occur when trying to drag it.

查看更多
0人赞 添加讨论(0) 举报
1 2 3 4 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)