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

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

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

温馨提示:内容为网友见解,仅供参考
第1个回答  2019-04-23

原生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>

试一试吧

本回答被网友采纳
相似回答