如何在调整浏览器大小时自动alignmentjQuery UI对话框?

当你使用jQuery的UI对话框,除了一件事情,一切运作良好。 当浏览器被resize时,对话框只停留在初始位置,这真的很烦人。

你可以testing它: http : //jqueryui.com/demos/dialog/

点击“模式对话框”示例并调整浏览器的大小。

我希望能够让浏览器resize时使对话框自动居中。 这可以在我的应用程序中的所有对话框有效地完成吗?

非常感谢!

设置position选项会强制执行此操作,所以只需使用相同的select器来覆盖我在这里使用#dialog所有对话框(如果没有find它们,就像所有的jQuery一样):

jQuery UI 1.10之前

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

jQuery UI 1.10或更高版本

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

这里是同样的jQuery UI演示页面 ,只添加上面的代码 ,我们只是用.resize()添加一个处理程序到窗口的resize事件,所以它在适当的时候触发重新中心。

对于Ellesedil的回答,

这个解决scheme并不适合我,所以我做了以下dynamic但缩短的版本:

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

虽然Ellesedil +1

编辑:

非常适合单个对话框的短版本:

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

如果你有一些你不想碰的独特的对话框,那么使用.each()就没有必要了。

在这里可以find一个更全面的答案,这个答案以更灵活的方式使用Nick的答案。

下面是该线程的相关代码的适配。 这个扩展本质上创build了一个名为autoReposition的新对话框设置,它接受true或false。 编写的代码默认选项为true。 把它放到项目中的.js文件中,以便你的页面可以利用它。

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

当您在页面上创build对话框时,这允许您为此新设置提供“true”或“false”。

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

现在这个对话框总是会重新定位。 AutoReposition(或任何你所说的设置)可以处理没有默认位置的任何对话框,并在窗口resize时自动重新定位它们。 由于您在创build对话框时设置了此对话框,因此无需以某种方式识别对话框,因为重新定位function已内置到对话框本身中。 而最好的部分是,因为这是根据对话设置的,你可以让一些对话重新定位自己,而其他的则保持在原来的位置。

感谢jQuery论坛上的用户scott.gonzalez以获得完整的解决scheme。

另一个可行的CSS选项是这样的。 负边距应该等于您的高度的一半,宽度的一半。 所以在这种情况下,我的对话框宽720px,高400px。 这使它垂直和水平居中。

 .ui-dialog { top:50% !important; margin-top:-200px !important; left:50% !important; margin-left:-360px !important } 

或者可以使用jQuery的ui 位置 ,

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

大家好!

香草JS解决scheme:

 (function() { window.addEventListener("resize", resizeThrottler, false); var resizeTimeout; function resizeThrottler() { if (!resizeTimeout) { resizeTimeout = setTimeout(function() { resizeTimeout = null; actualResizeHandler(); }, 66); } } function actualResizeHandler() { $(".ui-dialog-content").dialog("option", "position", { my: "center", at: "center", of: window }); } }());