浏览器调整大小后如何使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

如果您支持 IE8 及更低版本，我强烈建议使用 css 媒体查询来实现这一点，并使用 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 : 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版本。显然它是一个错误，并在较新的版本中得到修复。

升级 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 yourfixed 对话框引起的 - collision logic。 .dialog() 的 collision 默认值为 = fit。

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

我尝试了其他碰撞选项：flip、flipfit、none，但由于width="1000px" jQueryUI 无法为对话框找到合适的位置。

通过为对话框提供动态宽度并绑定window.resize() 事件，对话框将始终为文档宽度的 80%，并始终重新定位到中心。 See demo

CSS

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

JavaScript

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

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

HTML

<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>