本文實(shí)例講述了JS使用遮罩實(shí)現(xiàn)點(diǎn)擊某區(qū)域以外時(shí)彈窗的彈出與關(guān)閉功能。分享給大家供大家參考，具體如下：

HTML部分：

<div id="div">點(diǎn)擊除開div的區(qū)域可以彈出彈窗</div><div id="cover"></div><div id="box">點(diǎn)擊除開div和彈窗的區(qū)域可以關(guān)閉彈窗</div>

CSS部分：

#div{  /*設(shè)置z-index屬性必須設(shè)置position:relative或absolute*/   position:relative;  /*設(shè)置div位于遮罩的上方*/   z-index:2;  width:300px;  height:200px;  border:1px solid grey;}#cover{  position:fixed;  width:100%;  height:100%;  left:0;  top:0;  /*設(shè)置遮罩位于div的下方*/   z-index:1;}#box{  border:1px solid grey;  /*當(dāng)彈窗顯示時(shí)，屏幕滾動(dòng)時(shí)，彈窗始終保持位置固定在屏幕正中，不隨屏幕滾動(dòng)而變化位置*/  position:fixed;  width:400px;  height:300px;  left:50%;  top:50%;  /*配合left:50%和top:50%屬性使得浮出層的中心默認(rèn)在屏幕正中，margin-top為height的一半，margin-left為width的一半*/  margin:-150px 0 0 -200px;   /*設(shè)置彈窗位于遮罩的上方*/   z-index:2;  /*開始時(shí)隱藏彈窗*/  display:none;}

JavaScript部分：

document.getElementById("cover").onclick = function() {   if (document.getElementById("box").style.display == "block") {    document.getElementById("box").style.display = "none";    document.getElementById("cover").style.background = "white";  }  else {    document.getElementById("box").style.display = "block";    document.getElementById("cover").style.background = "#aaa";  }}

感興趣的朋友可以使用在線HTML/CSS/JavaScript前端代碼調(diào)試運(yùn)行工具：http://tools.Vevb.com/code/WebCodeRun測(cè)試一下運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。