居中jQuery UI对话框

有没有人遇到过这个 - 我有一个jQuery UI对话框，它在FF和IE中完全居中，但在Chrome中被卡在左侧！居中jQuery UI对话框

代码非常标准。尽管如此，我下面将其复制：

<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")开了一个按钮被点击

来源

2011-01-21 Kshitij Saxena -KJ-

我很想在回调中特别指出它的造型。有`position：absolute; left：50％; margin-left：-350px` – 2011-01-21 14:55:20

是的，我有这个确切的问题，我也对解决方案感兴趣。 – Vadim 2011-01-21 15:07:38

时，如果您添加到您的样式表，它应该解决您的问题：

.ui-dialog { margin:0 auto; }

来源

2011-01-21 15:22:47 mVChr

它的工作！为什么这从CSS中省略？是否有错误报告？ – 2011-01-21 16:37:12

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

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。

来源

2011-01-21 15:37:24 mekwall

最新的jQuery UI的下载具有此样式对话框

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

这肯定铬的作品。我认为旧版本有position: relative所以这可能是你的问题

来源

2011-01-21 15:55:08 Vadim

我下载了两个晚上1.8.9的平滑主题，并有同样的问题。保证金css解决方案适用于我。在主题后加载其他样式规则以覆盖某些主题设置。不知道为什么它丢失，但...

来源

2011-02-21 02:02:18 Jesse

如果有人在IE浏览器但不在Chrome或FF上有这个问题，请尝试添加一些文档到页面。这对我有效：

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

来源

2013-05-13 22:13:10 ducke1942

居中jQuery UI对话框

回答

相关问题