这是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中进行搜索)。

08-15 18:58
查看更多