blocks|key|1175472|text|最新的jQuery+UI有一个position组件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1175473|$("#myDialog").position({
+++my:+"center",
+++at:+"center",
+++of:+window
});|code-block|syntax|javascript|1175474|文档：http://jqueryui.com/demos/position/|offset|length|1175475|获取：http://jqueryui.com/download|1175476|entityMap|0|LINK|mutability|MUTABLE|url|http://jqueryui.com/demos/position/|1|http://jqueryui.com/download^0|0|0|3|Z|0|0|3|S|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@$I|13|J|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

The latest jQuery UI has a position component:

<pre><code>$("#myDialog").position({
 my: "center",
 at: "center",
 of: window
});
</code></pre>

Doc: <a href="http://jqueryui.com/demos/position/" rel="noreferrer">http://jqueryui.com/demos/position/</a> 
Get: <a href="http://jqueryui.com/download" rel="noreferrer">http://jqueryui.com/download</a>

blocks|key|1391066|text|因为对话框需要一个位置，所以需要包括js位置。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1391067|<script+src="jquery.ui.position.js"></script>|code-block|syntax|javascript|1391068|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>&lt;script src="jquery.ui.position.js"&gt;&lt;/script&gt;
</code></pre>

blocks|key|1176292|text|open:+function+()+{

++++var+win+=+$(window);

++++$(this).parent().css({
++++++++position:+'absolute',
++++++++left:+(win.width()+-+$(this).parent().outerWidth())+/+2,
++++++++top:+(win.height()+-+$(this).parent().outerHeight())+/+2
++++});
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1176293|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre class="lang-js prettyprint-override"><code>open: function () {

 var win = $(window);

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

blocks|key|1391336|text|所以，如果有人像我一样点击这个页面，或者当我在15分钟内忘记了，我正在使用jqueryui对话框版本1.10.1和jquery+1.9.1，并在iframe中使用ie8+(诸如此类)，它需要在指定的范围内，否则它不能工作，即|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1391337|position:+{
+my:+"center+bottom",
+at:+"center+top",
+of:+$("#submitbutton"),
+within:+$(".content")
}|code-block|syntax|javascript|1391338|感谢@vm370为我指明了正确的方向。|1391339|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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.

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

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

blocks|key|1391576|text|要确定中心位置，我使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1391577|open+:+function()+{
++++var+t+=+$(this).parent(),+w+=+window;
++++t.offset({
++++++++top:+(w.height()+/+2)+-+(t.height()+/+2),
++++++++left:+(w.width()+/+2)+-+(t.width()+/+2)
++++});
}|code-block|syntax|javascript|1391578|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

To fix center position, I use:

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

blocks|key|1391626|text|试试这个..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1391627|$(window).resize(function()+{
++++$("#dialog").dialog("option",+"position",+"center");
});|code-block|syntax|javascript|1391628|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this....

<pre><code>$(window).resize(function() {
 $("#dialog").dialog("option", "position", "center");
});
</code></pre>

blocks|key|1391838|text|我必须调用函数dialog()两次来定位对话框(jQuery+v1.11.2+/+jQueryUI+v1.10.4)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1391839|$("#myDialog").dialog({
++++/*+initial+dialog+parameters+*/
}).dialog({
++++position:+{
++++++++my:+"center+center",
++++++++at:+"center+center",
++++++++of:+window
++++}
});|code-block|syntax|javascript|1391840|entityMap^0|7|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

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

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

blocks|key|1391738|text|另一件可能让您在JQuery对话框定位方面遇到麻烦的事情，特别是对于大于浏览器视图端口的文档，您必须添加声明|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1391739|<!DOCTYPE+html>|code-block|syntax|javascript|1391740|在您的文档的顶部。|1391741|如果没有它，jquery倾向于将对话框放在页面的底部，并且在尝试拖动它时可能会出现错误。|1391742|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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

<pre><code>&lt;!DOCTYPE html&gt;
</code></pre>

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.

blocks|key|1391788|text|下面的位置参数对我有效|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1391789|position:+{+my:+"right+bottom",+at:+"center+center",+of:+window+},|code-block|syntax|javascript|1391790|祝好运!|1391791|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Following position parameter worked for me

<pre><code>position: { my: "right bottom", at: "center center", of: window },
</code></pre>

Good luck!

blocks|key|1175783|text|根据下面的讨论，问题可能是由于较新的jQuery版本中IE兼容性较差，恢复到1.7.2似乎可以解决问题，这只会在IE8中发生。http://forum.jquery.com/topic/jquery-ui-dialog-positioning-not-working-in-ie-8|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1175784|entityMap|0|LINK|mutability|MUTABLE|url|http://forum.jquery.com/topic/jquery-ui-dialog-positioning-not-working-in-ie-8^0|1R|26|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

According to the following discussion, the problem could be due to less IE compatibility in the newer jQuery versions, reverting back to 1.7.2 seems to resolve the problem, which only occurs in IE8.
<a href="http://forum.jquery.com/topic/jquery-ui-dialog-positioning-not-working-in-ie-8" rel="nofollow">http://forum.jquery.com/topic/jquery-ui-dialog-positioning-not-working-in-ie-8</a>

blocks|key|1391860|text|我对此有一个问题，我最终解决了这个问题。直到今天，我还在使用jQuery的一个非常老的版本，1.8.2版。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1391861|在我使用dialog的任何地方，我都使用以下位置选项对其进行了初始化：|offset|length|style|CODE|1391862|$.dialog({
++++position:+"center"
});|code-block|syntax|javascript|1391863|但是，我发现删除position:+"center"或用正确的语法替换它并不能解决问题，例如：|1391864|$.dialog({
++++position:+{
+++++++my:+"center",
+++++++at:+"center",
+++++++of:+window
++++}
});|1391865|虽然上面的设置是正确的，但在加载页面时，我也使用了option将位置设置为中心，如下所示：|1391866|//+The+wrong+old+way+of+keeping+a+dialog+centered
passwordDialogInstance.dialog("option",+"position",+"center");|1391867|这导致我的所有对话框窗口都停留在视口的左上角。|1391868|我必须用下面正确的新语法替换所有的实例：|1391869|passwordDialogInstance.dialog(
++++"option",
++++"position",+
++++{+my:+"center",+at:+"center",+of:+window+}
);|1391870|entityMap^0|0|4|6|0|0|8|I|0|0|P|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@$D|14|E|15|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|17|8|@$D|18|E|19|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|1A|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1B|8|@$D|1C|E|1D|F|G]]|9|@]|A|$]]|$1|S|3|T|5|J|7|1E|8|@]|9|@]|A|$K|L]]|$1|U|3|V|5|6|7|1F|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1G|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|J|7|1H|8|@]|9|@]|A|$K|L]]|$1|10|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|11|$]]

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 <code>dialog</code> I had initialised it with the following position option:

<pre><code>$.dialog({
 position: "center"
});
</code></pre>

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

<pre><code>$.dialog({
 position: {
 my: "center",
 at: "center",
 of: window
 }
});
</code></pre>

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

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

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:

<pre><code>passwordDialogInstance.dialog(
 "option",
 "position", 
 { my: "center", at: "center", of: window }
);
</code></pre>

blocks|key|1391001|text|如果您正在使用单独的jquery文件或自定义的jquery下载，请确保您的页面中也添加了jquery.ui.position.js。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1391002|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

If you are using individual jquery files or a custom jquery download either way make sure you also have jquery.ui.position.js added to your page.

blocks|key|1391175|text|你是不是只在IE中遇到这个问题？如果是这样，请尝试将此代码添加到页面HEAD标记的第一行：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1391176|<meta+http-equiv="X-UA-Compatible"+content="IE=7"+/>|code-block|syntax|javascript|1391177|我认为所有的兼容性问题都在后来的jQueries中解决了，但今天我遇到了这个问题。|1391178|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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

<pre><code>&lt;meta http-equiv="X-UA-Compatible" content="IE=7" /&gt;
</code></pre>

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

blocks|key|1175938|text|对于较旧的版本和不想使用position的用户，请尝试此方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1175939|$("#dialog-div-id").dialog({position:+['center',+'top'],....|code-block|syntax|javascript|1175940|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>$("#dialog-div-id").dialog({position: ['center', 'top'],....
</code></pre>

blocks|key|1391506|text|如果在移动设备上使用jquery+ui，你也需要手动重新居中-对话框是通过'left+&+top‘css属性手动定位的。如果用户切换方向，则定位不再居中，之后必须调整/重新居中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1391507|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You also need to do manual re-centering if using jquery ui on mobile devices - the dialog is manually positioned via a 'left &amp; top' css property. if the user switches orientation, the positioning is no longer centered, and must be adapted / re-centered afterwards.

blocks|key|1391569|text|对于Win7/IE9环境，只需在css文件中设置：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1391570|.ui-dialog+{
+++top:+100px;
+++left:+350px+!important;
}|code-block|syntax|javascript|1391571|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>.ui-dialog {
 top: 100px;
 left: 350px !important;
}
</code></pre>

blocks|key|1176131|text|我用css修复了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1176132|.ui-dialog+.ui-dialog-content+{
++width:+975px!important;
++height:+685px!important;
++position:+fixed;
++top:+5%25;
++left:+50%25;
++margin:0+0+0+-488px;
}|code-block|syntax|javascript|1176133|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I fixed with css: 

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

blocks|key|1176186|text|无法使IE9使对话框居中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1176187|通过将以下内容添加到css来修复此问题：|1176188|.ui-dialog+{
++++left:1%25;
++++right:1%25;
}|code-block|syntax|javascript|1176189|百分比并不重要。任何一个小数字都行得通。|1176190|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Could not get IE9 to center the dialog. 

Fixed it by adding this to the css:

<pre class="lang-css prettyprint-override"><code>.ui-dialog {
 left:1%;
 right:1%;
}
</code></pre>

Percent doesn't matter. Any small number worked.

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?

<pre><code>$('.selector').dialog({ position: 'center' });
</code></pre>

<a href="http://docs.jquery.com/UI/Dialog#option-position" rel="noreferrer">http://docs.jquery.com/UI/Dialog#option-position</a>

How can I position my jQuery dialog to center?

jQuery

我尝试了下面的代码，但它只将对话框的左上角位置定位到中心位置，这使得元素要右对齐。如何将对话框居中到计算元素宽度的实际中心，以便中心线将对话框切成50% 50%的一半？$('.selector').dialog({ position: 'center' });

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

回答 18

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 18

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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