居中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對話框

回答

相關問題