完美世界官网,兽性总裁的爱奴,国际完美世界下载

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

JS如何使用遮罩實現(xiàn)點擊某區(qū)域以外時彈窗的彈出與關(guān)閉功能

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

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

具體如下：

HTML部分：

點擊除開div的區(qū)域可以彈出彈窗

點擊除開div和彈窗的區(qū)域可以關(guān)閉彈窗

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;
  /*當彈窗顯示時，屏幕滾動時，彈窗始終保持位置固定在屏幕正中，不隨屏幕滾動而變化位置*/
  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; 
  /*設(shè)置彈窗位于遮罩的上方*/ 
  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";
  }
}

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

本文標題：JS如何使用遮罩實現(xiàn)點擊某區(qū)域以外時彈窗的彈出與關(guān)閉功能
網(wǎng)站地址：http://fisionsoft.com.cn/article/gdpojg.html

新聞中心

其他資訊