0

こんにちは、popup-box という単純なポップアップを作成しています。10 秒間だけ表示したいのですが、この期間が過ぎると非表示になるので、どうすればよいか教えてください。

ここに私のコードがあります:

CSS コード:

/* Styles for game over popup */
   #popup {
font-family: 'Orbitron', serif;
font-size: 28px;
font-weight: 700;     
text-shadow: 0px 1px 2px #fff;

color: #222;

position: absolute;   
width: 100%;
height: 100%;
top: 0;
left: 0;

background: rgba(0,0,0,.5);

display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;          

-webkit-transition: all .5s ease-in;}

    #popup h1 {
font-weight: 400;}

    #popup-box {
width: 400px;
height: 400px;
background: #ccc url(../images/popup_bg.jpg);

border-radius: 10px;

position: relative;

-webkit-box-shadow: 0 5px 5px #333;

display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;

-webkit-transition: all .5s ease-in;
    }

    #popup-box small {
font-size: .6em;
    }
      /***** Styles to hide the popup box ******/
    #popup.hide {
background: rgba(0,0,0,0);
visibility: hidden;     
       }
   #popup.hide #popup-box{
margin-top: -800px;
    }

HTMLコード:

        <section id="popup"  class="hide">

     <div id="popup-bg"></div>

     <div id="popup-box">
               Cards are laid out in a grid face down,
       and players take turns flipping pairs of cards over.
       On each turn, the player will first turn one card over, 
       then a second. If the two cards match, 
       the player scores one point,
       the two cards are removed from the game, 
       and the player gets another turn. 
       If they do not match, the cards are turned back over.


         </div>


   </section>

前もって感謝します

4

2 に答える 2

3

例として、jQueryを使用すると、次のように実行できます。

$("#popup").fade​In(500, function​​​​​​​() {
    $(this).delay(10000).fadeOut(500)
})​;​

デモ: http://jsfiddle.net/Q8xMk/

于 2012-05-02T12:59:31.230 に答える
1

これを HTML の任意の場所に追加します。

<script>
window.onload = function() {
    setTimeout(function() { document.getElementById("popup-box").style.display = "none" }, 10000);
}
</script>

setTimeout(f, t)基本的にt秒f後に関数を呼び出します。これは onで呼び出されるため、ページが完全に読み込まれてからt秒後に呼び出されます。window.onload

于 2012-05-02T13:06:34.733 に答える