Question

javascript或jQuery实现自动弹出层可自动关闭源代码，如何实现？

求一款javascript或jQuery实现的弹出层源代码，弹出图片即可。

Answer 1

<style>
html,body {margin:0; padding:0; width:100%; height:100%; font-size:36px;}
#bak {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5)}
#box {position:absolute; left:50%; top:50%; width:400px; height:240px; margin-left:-200px; margin-top:-120px; background-color:#fff}
</style>
<span id="s1">10</span>秒后会自动弹出层
<div id="bak">
   <div id=box>
      <span id="s2">20</span>秒后会自动关闭层
   </div>
</div>
<script>
$(function(){
   var s=10;
   function showLayer(){
      setTimeout(function(){
         $("#s1").text(--s);
         if(s){
            showLayer();
         }else{
            $("#bak").show();
            s=20;
            function hideLayer(){
               setTimeout(function(){
                  $("#s2").text(--s);
                  if(s){
                     hideLayer();
                  }else{
                     $("#bak").hide();
                  }
               },1000);
            }
            hideLayer();
         }
      },1000);
   }
   showLayer();
});
</script>

如果不需要计数，那就很简单了（只列出js代码了）：

<script>
$(function(){
   setTimeout(function(){
      $("#bak").show();
      setTimeout(function(){
         $("#bak").hide();
      },20000);
   },10000);
});
</script>

追问

如何增加关闭按钮，可以自动点击关闭

追答

不要乱用“自动”两个字！“自动点击”？究竟是用鼠标手动去点击？还是不点击自动运行？

如果需要增加手动点击关闭功能，可以这样（js代码略）：

<style>
html,body {margin:0; padding:0; width:100%; height:100%; font-size:36px;}
#bak {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5)}
#box {position:absolute; left:50%; top:50%; width:400px; height:240px; margin-left:-200px; margin-top:-120px; background-color:#fff}
#close {position:absolute; right:0; top:0;}
</style>
<span id="s1">10</span>秒后会自动弹出层
<div id="bak">
   <div id=box>
      <span id="s2">20</span>秒后会自动关闭层
      <span id="close" onclick="$('#bak').hide();">关闭</span>
   </div>
</div>

Answer 2

原生JavaScript实现

<style>
#tanchuang{
	width:500px;
	height:500px;
	background-color:#0f0;
	display:none;
}
</style>
<p onclick="show();">点我</p>
<div id="tanchuang">
	我是弹窗
</div>
<script>
	function show(){
		document.getElementById("tanchuang").style.display="block";
		setTimeout('tanchuang()',1000);//1000是自动关闭的时间，单位是毫秒
	}
	function tanchuang(){
		document.getElementById("tanchuang").style.display="none";
	}
</script>

试一试吧