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 回答