jQuery對話框始終居中

我該如何實現，自動調整寬度爲&的jQuery模式對話框始終居中在瀏覽器中。在調整瀏覽器窗口的大小之後。jQuery對話框始終居中

以下代碼不起作用。我認爲問題是自動寬度爲&高度。

的jQuery - 代碼

$("<div class='popupDialog'>Loading...</div>").dialog({ 
    autoOpen: true, 
    closeOnEscape: true, 
    height: 'auto', 
    modal: true, 
    title: 'About Ricky', 
    width: 'auto' 
}).bind('dialogclose', function() { 
    jdialog.dialog('destroy'); 
}).load(url, function() { 
    $(this).dialog("option", "position", ['center', 'center']); 
}); 

$(window).resize(function() { 
    $(".ui-dialog-content").dialog("option", "position", ['center', 'center']); 
});

謝謝！

來源

2011-09-26 shub

綁定'resize'事件的'window'並更新你的'頂/左'相應地定位 – Chad

他怎麼能把你的評論標記爲正確的答案，我想知道？ :-) – Hubro

我更新了我的問題。 – shub

周圍的對話框模式窗口，應該讓你與放置的CSS爲中心的對話框：

margin-left:auto;margin-right:auto;

這難道不是工作？你有一個我們可以看到的'樣本'頁面嗎？

來源

2011-09-26 15:03:29 TeckniX

這不會將盒子沿Y軸放置 – Hubro

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

工作的jsfiddle：http://jsfiddle.net/vNB8M/

對話框居中，自動寬度&高度並繼續窗口調整大小後的中心。

來源

2011-09-26 15:09:51

不幸的是，這不起作用，請查看我的代碼。 – shub

什麼不是「工作」？你能更詳細地描述問題嗎？ –

如果我重新調整瀏覽器的窗口大小，對話框將不會居中。使用'width＆height = auto'時，對話框位於右下角。 – shub

實際上，我認爲position: ["center", "center"]不是最好的解決方案，因爲它根據創建時視口的大小爲對話框分配了一個css屬性對話框。

當我嘗試在屏幕上垂直顯示一個對話框時，我遇到了同樣的問題。這裏是我的解決方案：

在options部分我的.dialog()函數中，我通過了position:[null, 32]。 null將left:值設置爲元素的樣式，而32僅用於將對話框固定在窗口的頂部。另外一定要設置一個明確的寬度。

我也用dialogClass選項來指定自定義類，它是一個簡單的margin:0 auto; CSS屬性：

.myClass{ 
    margin:0 auto; 
}

和我對話的樣子：

$('div#popup').dialog({ 
    autoOpen: false, 
    height: 710, 
    modal: true, 
    position: [null, 32], 
    dialogClass: "myClass", 
    resizable: false, 
    show: 'fade', 
    width: 1080 
    });

希望這可以幫助別人。

來源

2011-11-03 17:53:38 CamelBlues

沒有任何答案完全符合我的要求。對於那些仍然有問題的人來說，這是對我有用的東西。這將強制對話框始終出現在屏幕的中心，並且會在瀏覽器調整大小時將對話框居中。

$("#ShowDialogButton").click(function(){ 
    $("#MyDialog").dialog({ 
     show: 'fade' 
    }).dialog("option", "position", { my: "center", at: "center", of: window }); 

    $(window).resize(function() { 
     $("#MyDialog").dialog("option", "position", { my: "center", at: "center", of: window }); 
    }); 

});

來源

2014-07-24 20:22:48 Dan

再說一遍，如果它對你有用是因爲你沒有加載動態內容。您的具體條件與原始要求的不同。 – Pere

該解決方案的工作：

$(window).resize(function() 
{ 
    $("#myDialog").dialog("close"); 
    $("#myDialog").dialog("open"); 
});

表現也相當不錯，但你可以等待調整大小結束：jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?。

我也試過，但我不能比打開的對話框中元素的位置滾動更低或更高：

$(window).scroll(function() 
{ 
    $("#myDialog").dialog("close"); 
    $("#myDialog").dialog("open"); 
});

來源

2016-07-26 18:23:43

jQuery對話框始終居中

回答

相關問題