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

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/

如果你将中间的栏一直滚动到左侧然后运行它，你会发现要查看右侧的对话框内容，你需要将其拖动到标题栏左侧，然后才可以看到右侧的对话框内容。将出现滚动条。

以下屏幕是浏览器全屏时的屏幕。正如您所看到的，内容非常适合:

现在页面大小已调整，然后我打开了对话框。如您所见，它是左对齐的。没有滚动条，获取滚动条的唯一方法是将对话框向左拖动(通过标题上出现的光标)以显示滚动条。这是查看右侧内容(段落/标题开头)的唯一方法。

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 上的此存储库并执行窗口搜索媒体查询: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

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

干杯