怎么让js的弹出窗口自动关闭

JavaScript023

怎么让js的弹出窗口自动关闭,第1张

使用以下方法屏蔽页面弹出窗口或打开页面:

1、window.open=null//屏蔽window.open打开新页面

2.window.showModalDialog=null;//屏蔽window.showModalDialog打开模态窗口

3、window.showModelessDialog=null;//屏蔽window.showModelessDialog打开非模态窗口

补充:有些弹出窗口使用的是div显示的假窗口。应视具体情况采取措施。

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

两种方法:去除和隐藏

//创建你的弹出层

var dvMsg = document.createElement("div")

strHtml = "<div class='####'>弹出层内容</div>"

strHtml += " <div class='####'><input type='button' value='关闭' onclick='btnclick()'></div>"

dvMsg.innerHTML = strHtml

document.body.appendChild(dvMsg)

// 关闭按钮

btnclick = function (){

document.body.removeChild(dvMsg)

-------------------------

或者 弹出层用div id标记

<div id="tanchu">弹出层内容</div>

js里

function open(){

document.getElementById(tanchu).style.display="" //显示

}

function close(){

document.getElementById(tanchu).style.display="none" //不显示(页面初始化的时候同样加载一遍)

}