这是jsFiddle:http://jsfiddle.net/arJEx/
这是到目前为止我得到的:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Waiting</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<style>
* { margin:0;padding:0; }
#wait {
background:#ABC7D9;
border-top:4px solid #597F99;
border-bottom:4px solid #597F99;
padding:50px;
text-align:center;
font:23pt Georgia;
color:#1C5378;
display:none;
overflow: hidden;
}
</style>
<script type="text/javascript">
$(function() {
$(".act").live("click",function() {
$("#wait").slideDown("slow");
});
});
</script>
</head>
<body>
<button class="act">Activate effect</button>
<div id="wait">Please wait...</div>
</body>
</html>
我想要它,所以当我按下该按钮时,蓝色div会滑到页面的中间...但是我似乎无法找出如何做。请帮忙?
编辑:好的,它不必在屏幕中间,而在零件顶部附近。喜欢..靠近页面顶部到顶部的任何地方。
最佳答案
您的JS一切都很好。您需要更改CSS。首先,div的容器必须填充所有窗口:
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
比更改div的CSS。第一种方法(不确定IE):
#wait {
/* remove padding and append those */
position: absolute;
top: 5%; /* change it */
bottom: 50%;
width: 100%
}
第二个:
#wait {
/* remove padding and append those */
height: 50%;
}
您将需要解决一个问题。您将需要在不使用填充的情况下垂直对齐文本,这是另一个问题(只需在stackoverflow或goole中进行搜索)。