如何设置对话框位置到页面中心的动画？

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);
    }
});