Question

之前有没有人面对过这个问题 - 我有一个jQuery UI对话框，它完全集中在FF和IE中，但是在Chrome中左侧！

代码很标准。不过，我正在复制它：

<script>
$(function() {$('#dialog1 ').dialog({autoOpen: false, 
width: 700, height: 400, buttons: {
                        "Ok": function() { 
                            $(this).dialog("close"); 
                            }, 
                        "Cancel": function() { 
                            $(this).dialog("close"); 
                            }
                        }
                    });
        });
</script>

<div id="dialog1">Hello</div>

单击按钮时，使用$("dialog1").dialog("open")打开

Answer 1

如果您将其添加到样式表中，它应该可以解决您的问题：

.ui-dialog { margin:0 auto; }

Answer 2

我在两天前的1.8.9下载了平滑主题并遇到了同样的问题。保证金CSS解决方案适合我。我在主题后加载其他样式规则以覆盖某些主题设置。不知道为什么它会丢失......

Answer 3

我通过绑定window resize事件解决了这个问题。

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

$(window).resize(function(e){
    var $w = $(this),
        $d = $dialog.parent(),
        x = $w.width()/2-($d.width()/2),
        y = $w.height()/2-($d.height()/2);
    $dialog.dialog('option', 'position', [x, y]);
});

选中demo on jSfiddle。

Answer 4

最新的jquery-ui下载具有此对话框的风格

.ui-dialog 
{ 
   position: absolute; 
   padding: .2em; 
   width: 300px; 
   overflow: hidden; 
}

这肯定适用于chrome。我认为旧版本有position: relative因此可能是您的问题

Answer 5

如果某人在IE上遇到此问题但在Chrome或FF上没有，请尝试在页面中添加一些doctype。这对我有用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

中心jQuery UI对话框

5 个答案: