如何設置對話框位置到頁面中心的動畫？

Question

這是我的代碼：

dialog = $(this).closest('.ui-dialog')
dialog.animate({
    left: document.width - dialog.width(), // or you might want to use .outerWidth()
    top: document.height - dialog.height()
}, 1000);

我想用動畫將jQuery對話框放置在頁面的中央。 我只是不明白為什么它不起作用。 誰能幫我？

Answer 1

我實際上更喜歡position:fixed 。 這是對話的簡單演示，該對話過渡到瀏覽器窗口的中心。

演示： http ： //jsfiddle.net/FJPjQ/show
資料來源： http : //jsfiddle.net/FJPjQ/

---

基本上，它采用position：fixed div並將其左側值設置為50％，將頂部值設置為50％。 這會將對話框的左上角放在窗口的中央。 為了使對話本身居中，可以給它的上邊距為其高度的一半，而其左邊空白為寬度的一半。

jQuery的

var dialogue = $('.ui-dialog')

dialogue.animate({
    left: "50%",
    top: "50%",
    marginLeft:  -dialogue.width()/2,
    marginTop: -dialogue.height()/2
}, 1000);

HTML

<div class="ui-dialog">hi there</div>

CSS

.ui-dialog
{
    width: 200px;
    height: 50px;
    background: red;

    /* change these to change where it slides in from */
    top: -100px;
    margin-left: -100px;
    left: 50%;

    /* and this is what makes it work */
    position: fixed;
}

Answer 2

此代碼段可以幫助您同時居中和設置動畫：

$("#myJQUIdialog").parent().position({
    my: "center",
    at: "center",
    of: window,
    using: function (pos, ext) {
        $(this).animate({ top: pos.top }, 600);
    }
});