Question

我想在页面加载时从浏览器窗口的顶部显示一个框。

理想情况下，它看起来像这样：

http://demo.cookieconsent.silktide.com/

因此页面加载并向下滑动。

我将如何实现这一目标？

我看过http://jqueryui.com/demos/dialog/，但似乎并没有做到以上情况。

Answer 1

尝试this

在这个例子中，我创建了一个固定在窗口顶部但最初隐藏的div，然后在页面加载时显示向下滑动动画。

希望这会有所帮助

更新的演示HERE

Answer 2

试试这个 -

<强> HTML

<div id="box"><h1 style="text-align:center">content goes here</h1></div>

<强>的jQuery

$(document).ready(function(){
    $("#box").animate({top:"0px"},"slow");
});

<强> CSS

background:red;
position:fixed;
width:100%;
height:60px;
top:-60px

整个代码是 -

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>

<style>
#box
{
background:red;
position:fixed;
width:100%;
height:60px;
top:-60px
}
</style>
<script type="text/javascript"> 
$(document).ready(function(){
    $("#box").animate({top:"0px"},"slow");
});
</script> 
</head>

<body>
<div id="box"><h1 style="text-align:center">content goes here</h1></div>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
rest page content<br>
</body>
</html>

Answer 3

在您的html中添加<div>，将其css设置为position: fixed并完成您的操作。

如何在页面加载时从浏览器窗口的顶部显示一个框？

3 个答案: