這篇文章給大家分享的是有關JS如何使用遮罩實現(xiàn)點擊某區(qū)域以外時彈窗的彈出與關閉功能的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)服務項目包括資興網站建設、資興網站制作、資興網頁制作以及資興網絡營銷策劃等。多年來，我們專注于互聯(lián)網行業(yè)，利用自身積累的技術優(yōu)勢、行業(yè)經驗、深度合作伙伴關系等，向廣大中小型企業(yè)、政府機構等提供互聯(lián)網行業(yè)的解決方案，資興網站推廣取得了明顯的社會效益與經濟效益。目前，我們服務的客戶以成都為中心已經輻射到資興省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

具體如下：

HTML部分：

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

CSS部分：

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

感謝各位的閱讀！關于“JS如何使用遮罩實現(xiàn)點擊某區(qū)域以外時彈窗的彈出與關閉功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

新聞名稱：JS如何使用遮罩實現(xiàn)點擊某區(qū)域以外時彈窗的彈出與關閉功能
本文路徑：http://jinyejixie.com/article26/gdpojg.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供域名注冊、服務器托管、品牌網站制作、靜態(tài)網站、網站內鏈、云服務器

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)