Question

我正在尝试做什么： 当我的浏览器最大化并打开JQuery对话框时，它会按预期在中心打开它。但是，当我将浏览器的大小调整为略小于对话框的宽度然后打开对话框时，它始终打开它左对齐。右边有一大块空间。

代码

$(document).ready(function() { 
     var dlg = '';

     dlg=$('#ticketDetails').dialog({
        title: 'TICKET DETAILS',
        resizable: true,
        autoOpen:false,
        modal: true,
        show:'fast',
        hide: 'fade',
        buttons:{ "Close": function() { dlg.dialog("close"); } },
        close: function(e, i) { dlg.hide(); },
        width:1250

     });

我尝试了什么：

$(window).resize(function() {
    $('#ticketDetails').dialog({position: ['center', 'center']});
});

我已经阅读了一些答案并尝试了一些变化，但似乎没有任何效果......

更多信息：

http://jsfiddle.net/39GqM/479/

如果您将中间的条形图一直向左滚动然后运行它，您会注意到要查看右侧的对话框内容，您需要将其拖动到标题栏的左侧，然后才能滚动条将出现。

以下屏幕是浏览器全屏显示的时间。正如您所看到的，内容完美契合： enter image description here

现在页面已调整大小，然后我打开了对话框。正如你可以看到它的左对齐。没有滚动条，获取滚动条的唯一方法是向左拖动对话框（通过标题上显示的光标）以显示滚动条。这是查看右侧内容（段落/标题的开头）的唯一方法。 enter image description here

Answer 1

我强烈建议您使用css媒体查询来实现此目的，并在支持IE8及更低版本时使用polyfill作为后备。

以下是我对jsfiddle的解决方案：

http://jsfiddle.net/39GqM/505/

    .ui-dialog {
      min-width: 80%;  
      width: 80% !important;
   } 
   @media only screen and (min-width: 1200px) {
     .ui-dialog {
        width: 1000px !important;
    } 
   }

   @media only screen and (max-width: 1000px) {
    .ui-dialog {
        min-width: 80%;  
        width: 80% !important;
    }
  }

因此，您将定位 .ui-dialog 类，因为jQuery-UI会向DOM添加一堆标记，并且我将！important规则强制覆盖。调用窗口小部件时不要添加对话框宽度，让CSS处理它。

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

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

对于旧版浏览器，回退检查github上的这个repo并执行窗口搜索媒体查询： https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

实施polyfill通常非常简单，但在我看来这应该是一个不同的问题。希望它有所帮助。

干杯

Answer 2

我在对话框选项中的create语句中执行了此操作。它在屏幕中间保持我的对话框。

create : function() {
             $(window).resize(function() {
                $("#myDialog").parent().position({ 
                                    my : "center",
                                    at : "center",
                                    of : window
                                    });
             });
             $(window).scroll(function() {
                $("#myDialog").parent().position({
                                   my : "center",
                                   at : "center",
                                   of : window
                                   });
             });
},

在对话框的末尾，我链接了定位功能。

$("#myDialog").dialog({

 // do stuff
 // also add the positioning with "create"

}).parent().position({
     my : "center center",
     at : "center center+20",
     of : window
 });

小提琴：http://jsfiddle.net/djwave28/yf8fR/4/

Answer 3

你试过了吗？

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

Answer 4

修改

解决方案是将jQuery升级到版本1.8.6或更高版本+ jQuery UI到版本1.9.2。显然它是一个bug，并在新版本中得到修复。

升级后的jQuery的相同示例：http://jsfiddle.net/39GqM/490/

你应该试试这个

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

-> example <--

相关问题 How to auto-center jQuery UI dialog when resizing browser?

Answer 5

问题是由jQueryUI尝试position在没有足够可用空间时使用对话框collision logic引起的window.resize()。 collision的{{1}}默认值为= 适合。

“fit”：将元素移离窗口边缘。

我尝试了其他碰撞选项： flip，flipfit，none 但是因为.dialog() jQueryUI无法找到对话框的好位置。

通过为对话框提供动态宽度并绑定See demo事件，对话框将始终为文档宽度的80％，并始终重新定位到中心。 {{3}}

<强> CSS

width="1000px"

<强>的JavaScript

.width-80 {
  width:80% !important;
}

<强> HTML

var $dialog = $('#dialog');
$dialog.dialog({ dialogClass: 'width-80' });

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

浏览器调整大小后如何居中JQuery对话框

5 个答案: