[英]How can I animate dialog position to the center of a page?
Here is my code: 这是我的代码:
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);
I want to position jQuery dialog at the center of the page with animation. 我想用动画将jQuery对话框放置在页面的中央。 I just do not understand why it is not working.
我只是不明白为什么它不起作用。 Can anyone help me?
谁能帮我?
I actually prefer position:fixed
. 我实际上更喜欢
position:fixed
。 Here is a simple demo of a dialogue that transitions to the center of the browser window. 这是对话的简单演示,该对话过渡到浏览器窗口的中心。
Demo: http://jsfiddle.net/FJPjQ/show 演示: http : //jsfiddle.net/FJPjQ/show
Source: http://jsfiddle.net/FJPjQ/ 资料来源: http : //jsfiddle.net/FJPjQ/
Basically it takes a position:fixed div and gives it a left value of 50% and a top value of 50%. 基本上,它采用position:fixed div并将其左侧值设置为50%,将顶部值设置为50%。 This places the top left corner of the dialogue in the center of the window.
这会将对话框的左上角放在窗口的中央。 To make the dialogue itself center, you can then give it a top margin of negative half its height and a left margin of half its width.
为了使对话本身居中,可以给它的上边距为其高度的一半,而其左边空白为宽度的一半。
var dialogue = $('.ui-dialog')
dialogue.animate({
left: "50%",
top: "50%",
marginLeft: -dialogue.width()/2,
marginTop: -dialogue.height()/2
}, 1000);
<div class="ui-dialog">hi there</div>
.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;
}
This code snippet can help you to center and animate at the same time: 此代码段可以帮助您同时居中和设置动画:
$("#myJQUIdialog").parent().position({
my: "center",
at: "center",
of: window,
using: function (pos, ext) {
$(this).animate({ top: pos.top }, 600);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.