Question

您好我正在写一个名为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>

提前谢谢

Answer 1

例如，使用jQuery可以使用：

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

DEMO： http://jsfiddle.net/Q8xMk/

Answer 2

在HTML中的任何位置添加：

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

setTimeout(f, t)基本上在 t 秒之后调用函数f。由于它是在window.onload上调用的，因此在页面完全加载后，它会 t 秒。

显示指定秒数的css组件

2 个答案: