1

ページの読み込み時にブラウザウィンドウの上部からボックスを表示したい。

理想的には、次のようになります。

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

したがって、ページが読み込まれ、これが下にスライドします。

どうすればこれを達成できますか？

http://jqueryui.com/demos/dialog/を見ましたが、上記のようには機能しません。

4

3 に答える 3

2

これを試してください

この例では、ウィンドウの上部に固定されているが最初は非表示になっているdivを作成し、ページの読み込み時にスライドダウンアニメーションで表示しました。

お役に立てれば

ここで更新されたデモ

于 2012-06-08T10:37:34.253 に答える
1

これを試して-

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>
于 2012-06-08T11:02:17.923 に答える
0

HTMLにa<div>を入れ、そのcssをに設定position: fixedすれば完了です。

于 2012-06-08T10:32:28.597 に答える