当前位置：文江博客话题详情

jQuery dialog jquery-ui jquery-dialog

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

发布于 2024-08-12 22:06:45 字数 300 浏览 12 评论 0原文

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

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

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

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

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（22）

标点 2024-08-19 22:06:45

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

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

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

The latest jQuery UI has a position component:

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

Doc: http://jqueryui.com/demos/position/
Get: http://jqueryui.com/download

回复收藏 0 原文

回眸一笑 2024-08-19 22:06:45

我很确定您不需要设置位置：

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

默认情况下应居中。

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

代码示例 -（摘自 jQuery UI 2009-12-03）

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

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

初始化后获取或设置位置选项。

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

我认为，如果您要删除位置属性，您会发现它自行居中，否则请尝试第二个设置器选项，其中您定义了“选项”、“位置”和“中心”的 3 个元素。

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 原文

怕倦 2024-08-19 22:06:45

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

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

Because the dialog need a position, You need to include the js position

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

回复收藏 0 原文

稚然 2024-08-19 22:06:45

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 win = $(window);

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

回复收藏 0 原文

蓝眼泪 2024-08-19 22:06:45

因此，如果有人像我一样点击此页面，或者当我在 15 分钟内忘记时，我正在使用 iframe 中的 jqueryui 对话框版本 1.10.1 和 jquery 1.9.1 以及 ie8（废话），并且它需要在指定或它不起作用，即

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

感谢@vm370为我指明了正确的方向。

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 原文

耶耶耶 2024-08-19 22:06:45

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

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

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

I'm getting best results to put jQuery dialog in the center of browser's window with:

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

There's probably more accurate way to position it with option "using" as described in the documentation at http://api.jqueryui.com/position/ but I'm in a hurry...

回复收藏 0 原文

梦年海沫深 2024-08-19 22:06:45

为了固定中心位置，我使用：

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

To fix center position, I use:

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

回复收藏 0 原文

眼眸 2024-08-19 22:06:45

试试这个....

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

Try this....

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

回复收藏 0 原文

栖竹 2024-08-19 22:06:45

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

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

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 原文

暖风昔人 2024-08-19 22:06:45

Jquery UI 1.9.2，jquery及更高版本不支持IE8

我找到了两个解决方案。

回滚到 jquery UI 1.7.2 以支持 IE8，
尝试使用此代码Jquery UI 1.9.2

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

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

I found two solutions for that.

Rollback to jquery UI 1.7.2 to support IE8,
Try this code with Jquery UI 1.9.2

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

回复收藏 0 原文

木格 2024-08-19 22:06:45

添加声明

<!DOCTYPE html>

另一件事可能会给您带来 JQuery 对话框定位的麻烦，特别是对于大于浏览器视图端口的文档 - 您必须在文档顶部

。如果没有它，jquery 倾向于将对话框放在页面底部，并且在尝试拖动它时可能会发生错误。

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 原文

又爬满兰若 2024-08-19 22:06:45

以下位置参数对我有用

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

祝你好运！

Following position parameter worked for me

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

Good luck!

回复收藏 0 原文

甜宝宝 2024-08-19 22:06:45

根据下面的讨论，该问题可能是由于较新的 jQuery 版本中的 IE 兼容性较差，恢复到 1.7.2 似乎可以解决该问题，该问题仅出现在 IE8 中。
http://forum.jquery.com /topic/jquery-ui-dialog-positioning-not-working-in-ie-8

回复收藏 0 原文

你不是我要的菜∠ 2024-08-19 22:06:45

我遇到了这个问题，我终于弄清楚了。直到今天我还在使用 jQuery 的一个非常旧的版本，版本 1.8.2。

在我使用 dialog 的所有地方，我都使用以下位置选项对其进行初始化：

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

但是，我发现删除 position: "center" 或用正确的语法替换它并没有' t 做这个技巧，例如：

$.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 }
);

I had a problem with this and I finally figured this out. Until today I was using a really old version of jQuery, version 1.8.2.

Everywhere where I had used dialog I had initialised it with the following position option:

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

However, I found that removing position: "center" or replacing it with the correct syntax didn't do the trick, for example:

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

Although the above is correct, I was also using option to set the position as center when I loaded the page, in the old way, like so:

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

This was causing all of my dialog windows to stick to the top left of the view port.

I had to replace all instances of this with the correct new syntax below:

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

回复收藏 0 原文

勿忘心安 2024-08-19 22:06:45

如果您使用单独的 jquery 文件或自定义 jquery 下载，请确保您也将 jquery.ui.position.js 添加到您的页面中。

回复收藏 0 原文

远昼 2024-08-19 22:06:45

你只在 IE 中遇到这个问题吗？如果是这样，请尝试将其添加到页面 HEAD 标记的第一行：

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

虽然所有兼容性问题都在后来的 jQueries 中得到了修复，但今天我遇到了这个问题。

Are you running into this in IE only? If so, try adding this to the FIRST line of your page's HEAD tag:

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

I had though that all compatibility issues were fixed in later jQueries, but I ran into this one today.

回复收藏 0 原文

忆伤 2024-08-19 22:06:45

对于旧版本和不想使用位置的人尝试此操作：

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

Try this for older versions and somebody who don't want to use position:

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

回复收藏 0 原文

双马尾 2024-08-19 22:06:45

如果在移动设备上使用 jquery ui，您还需要手动重新居中 - 对话框是通过“左和右”手动定位的。顶部'CSS 属性。如果用户切换方向，则定位不再居中，并且之后必须进行调整/重新居中。

回复收藏 0 原文

小嗲 2024-08-19 22:06:45

对于Win7/IE9环境只需在你的css文件中设置：

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

For Win7/IE9 environment just set in your css file:

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

回复收藏 0 原文

相对绾红妆 2024-08-19 22:06:45

我用CSS修复了：

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

I fixed with css:

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

回复收藏 0 原文

橪书 2024-08-19 22:06:45

无法让 IE9 将对话框居中。

通过将其添加到 css 来修复它：

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

百分比无关紧要。任何少量的数字都有效。

Could not get IE9 to center the dialog.

Fixed it by adding this to the css:

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

Percent doesn't matter. Any small number worked.

回复收藏 0 原文

卸妝后依然美 2024-08-19 22:06:45

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

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

回复收藏 0 原文

~没有更多了~

关于作者

暂无简介

文章

评论

25 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

Promise

文章 0 评论 0

qq_lbRlsh

文章 0 评论 0

待＂谢繁草

文章 0 评论 0

yy2010hell

文章 0 评论 0

漫无边际

文章 0 评论 0

傲娇萝莉攻

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文