blocks|key|1220260|text|更全面的答案可以在here找到，它以更灵活的方式使用了尼克的答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1220261|下面是来自该线程的相关代码的改编。这个扩展实际上创建了一个名为autoReposition的新对话框设置，它接受true或false。编写的代码将该选项默认设置为true。将其放入项目的.js文件中，以便您的页面可以利用它。|1220262|++++$.ui.dialog.prototype.options.autoReposition+=+true;
++++$(window).resize(function+()+{
++++++++$(".ui-dialog-content:visible").each(function+()+{
++++++++++++if+($(this).dialog('option',+'autoReposition'))+{
++++++++++++++++$(this).dialog('option',+'position',+$(this).dialog('option',+'position'));
++++++++++++}
++++++++});
++++});|code-block|syntax|javascript|1220263|这允许您在页面上创建对话框时为此新设置提供"true“或"false”。|1220264|$(function()+{
++++$('#divModalDialog').dialog({
++++++++autoOpen:+false,
++++++++modal:+true,
++++++++draggable:+false,
++++++++resizable:+false,
++++++++width:+435,
++++++++height:+200,
++++++++dialogClass:+"loadingDialog",
++++++++autoReposition:+true,++++//This+is+the+new+autoReposition+setting
++++++++buttons:+{
++++++++++++"Ok":+function()+{
++++++++++++++++$(this).dialog("close");
++++++++++++}
++++++++}
++++});
});|1220265|现在，此对话框将始终重新定位自身。AutoReposition+(或您对该设置的任何称呼)可以处理任何没有默认位置的对话框，并在调整窗口大小时自动重新定位它们。因为您是在创建对话框时设置的，所以您不需要以某种方式标识一个对话框，因为重新定位功能已内置到对话框本身中。最好的部分是，因为这是为每个对话框设置的，所以您可以让一些对话框重新定位，而另一些对话框则保持不变。|1220266|向jQuery论坛上的用户scott.gonzalez致谢，以获得完整的解决方案。|1220267|entityMap|0|LINK|mutability|MUTABLE|url|http://forum.jquery.com/topic/re-positioning-of-dialog-after-resize-event^0|9|4|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|C|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]]]

A more comprehensive answer, which uses Nick's answer in a more flexible way can be found <a href="http://forum.jquery.com/topic/re-positioning-of-dialog-after-resize-event" rel="nofollow" title="jQuery Forums">here</a>.

An adaption of the code of relevance from that thread is below. This extension essentially creates a new dialog setting called autoReposition which accepts a true or false. The code as written defaults the option to true. Put this into a .js file in your project so that your pages can leverage it.

<pre><code> $.ui.dialog.prototype.options.autoReposition = true;
 $(window).resize(function () {
 $(".ui-dialog-content:visible").each(function () {
 if ($(this).dialog('option', 'autoReposition')) {
 $(this).dialog('option', 'position', $(this).dialog('option', 'position'));
 }
 });
 });
</code></pre>

This allows you to supply a "true" or "false" for this new setting when you create your dialog on your page.

<pre><code>$(function() {
 $('#divModalDialog').dialog({
 autoOpen: false,
 modal: true,
 draggable: false,
 resizable: false,
 width: 435,
 height: 200,
 dialogClass: "loadingDialog",
 autoReposition: true, //This is the new autoReposition setting
 buttons: {
 "Ok": function() {
 $(this).dialog("close");
 }
 }
 });
});
</code></pre>

Now this dialog will always reposition itself. AutoReposition (or whatever you call the setting) can handle any dialogs that do not have a default position and automatically reposition them when the window resizes. Since you're setting this when you create the dialog, you don't need to identify a dialog somehow because the repositioning functionality becomes built into the dialog itself. And the best part is that since this is set per dialog, you can have some dialogs reposition themselves and others remain where they are.

Credit to user scott.gonzalez on the jQuery forums for the complete solution.

blocks|key|1006029|text|与Ellesedil的答案不同，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1006030|这个解决方案对我来说不是直接有效的，所以我做了以下也是动态的但简短的版本：|1006031|$(+window+).resize(function()+{
++++$(".ui-dialog-content:visible").each(function+()+{
++++++++$(+this+).dialog("option","position",$(this).dialog("option","position"));
++++});
});|code-block|syntax|javascript|1006032|Ellesedil的%2B1|1006033|编辑：|1006034|短得多的版本，适用于单个对话框：|1006035|$(window).resize(function(){
++++$(".ui-dialog-content").dialog("option","position","center");
});|1006036|如果您有一些不想接触的独特对话框，则不需要使用.each()。|1006037|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

Alternatively to Ellesedil's answer,

That solution did not work for me straight away, So I did the following which is also dynamical but shortened version:

<pre><code>$( window ).resize(function() {
 $(".ui-dialog-content:visible").each(function () {
 $( this ).dialog("option","position",$(this).dialog("option","position"));
 });
});
</code></pre>

+1 for Ellesedil though

EDIT:

Much shorter version which works great for single dialogs:

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

It is not necessary for .each() to be used perhaps if you have some unique dialogs which you dont want to touch.

blocks|key|1006067|text|另一个只支持CSS的选项是这样的。负边距应等于高度的一半和宽度的一半。所以在这个例子中，我的对话框是720px宽，400px高。这将使其在垂直和水平方向居中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1006068|.ui-dialog+{
++top:50%25+!important;
++margin-top:-200px+!important;+
++left:50%25+!important;
++margin-left:-360px+!important
}|code-block|syntax|javascript|1006069|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|$]]

Another CSS-only option which works is this. The negative margins should equal half your height and half your width. So in this case, my dialog is 720px wide by 400px tall. This centers it vertically and horizontally.

<pre><code>.ui-dialog {
 top:50% !important;
 margin-top:-200px !important; 
 left:50% !important;
 margin-left:-360px !important
}
</code></pre>

blocks|key|1220357|text|可替换地，可以使用jQuery+ui+position，|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1220358|$(window).resize(function+()
{
++++$(".ui-dialog").position({
++++++++my:+"center",+at:+"center",+of:+window
++++});
});|code-block|syntax|javascript|1220359|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jqueryui.com/position/^0|J|8|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Alternatively jQuery ui <a href="http://api.jqueryui.com/position/" rel="nofollow">position</a> can be used,

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

When you use jquery UI dialog, all works well, except for one thing.
When the browser is resized, the dialog just stays in it's initial position which can be really annoying.
You can test it out on:
<a href="http://jqueryui.com/demos/dialog/" rel="nofollow noreferrer">http://jqueryui.com/demos/dialog/</a>
Click on the &quot;modal dialog&quot; example and resize your browser.
I'd love to be able to let dialogs auto-center when the browser resizes.
Can this be done in an efficient way for all my dialogs in my app?

How to auto-center jQuery UI dialog when resizing browser?

jQuery

当您使用jquery UI对话框时，除了一件事之外，所有的都工作得很好。当浏览器调整大小时，对话框只停留在初始位置，这真的很烦人。你可以在上测试它。单击“模式对话框”示例并调整浏览器的大小。我希望能够在浏览器调整大小时让对话框自动居中。我的应用程序中的所有对话框都可以以一种有效的方式完成吗？

问如何在调整浏览器大小时自动居中jQuery UI对话框？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在调整浏览器大小时自动居中jQuery UI对话框？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在调整浏览器大小时自动居中jQuery UI对话框？
EN