1

我正在尝试做的事情： 当我的浏览器最大化并打开 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/

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

以下屏幕是浏览器全屏时。如您所见，内容非常适合： 在此处输入图像描述

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

4

5 回答 5

3

如果您支持 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 通常非常简单，但我认为这应该是一个不同的问题。希望能帮助到你。

干杯

于 2013-03-18T19:12:41.590 回答
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/

于 2013-03-18T02:19:39.840 回答
0

你有没有尝试过 ：

$(window).resize(function() {
    $("#ticketDetails").dialog("option", "position", "center");
});
于 2013-02-19T09:59:15.173 回答
0

编辑

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

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

你应该试试这个

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

-> 示例 <--

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

于 2013-02-19T09:59:38.877 回答
0

问题是由 jQueryUI在没有足够的可用空间时试图用对话框定位yourfixed 引起的 -碰撞逻辑。a的collision默认.dialog()值为 = fit。

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

我尝试了其他碰撞选项：flip、flipfit、none但是因为width="1000px"jQueryUI 找不到对话框的好位置。

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

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>
于 2013-03-19T09:30:57.697 回答