欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)彈框效果

 更新時間：2021年03月18日 17:22:05   作者：程序猿余某人  
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)彈框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)彈框效果的具體代碼，供大家參考，具體內(nèi)容如下

利用display來控制彈窗的現(xiàn)實(shí)和隱藏

<!-- 彈出層 -->
<div id="popLayer"></div> <!--黑色蒙版 -->
<div id="popBox">
  <div class="close">
   X
  </div>
  <div>
   <!-- 內(nèi)容 -->
 </div>
</div>

js：

//點(diǎn)擊關(guān)閉按鈕
var close = document.querySelector(".close")
close.onclick = function () {
 console.log("點(diǎn)擊")
 var popBox = document.getElementById("popBox");
 var popLayer = document.getElementById("popLayer");
 popBox.style.display = "none";
 popLayer.style.display = "none";
}


//需要顯示時調(diào)用
var popLayer = document.getElementById("popLayer");
popBox.style.display = "block";
popLayer.style.display = "block";

CSS:

/* 彈出層 */
#popLayer {
 display: none;
 background-color: #000;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 10;
 opacity: 0.6;
}

/*彈出層*/
#popBox {
 display: none;
 background-color: #FFFFFF;
 z-index: 11;
 width: 220px;
 height: 300px;
 position: fixed;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 margin: auto;
}

/*關(guān)閉按鈕*/
#popBox .close {
 width: 20px;
 height: 20px;
 border-radius: 50%;
 position: absolute;
 border: 1px solid #fff;
 color: #fff;
 text-align: center;
 line-height: 20px;
 right: 8px;
 top: 8px;
 z-index: 50;
}

#popBox .close a {
 text-decoration: none;
 color: #2D2C3B;
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • JS學(xué)習(xí)筆記之貪吃蛇小游戲demo實(shí)例詳解

    JS學(xué)習(xí)筆記之貪吃蛇小游戲demo實(shí)例詳解

    這篇文章主要介紹了JS學(xué)習(xí)筆記之貪吃蛇小游戲demo,結(jié)合實(shí)例形式詳細(xì)分析了javascript實(shí)現(xiàn)貪吃蛇小游戲的原理、步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2019-05-05
  • 不安全的常用的js寫法

    不安全的常用的js寫法

    一種很常見的寫法,大家都是這樣寫的，但如果這樣的代碼，殺毒軟件認(rèn)為是病毒的吧，就太惡劣的。判斷能力也太差了。
    2009-09-09
  • js實(shí)現(xiàn)滾動條滾動到頁面底部繼續(xù)加載

    js實(shí)現(xiàn)滾動條滾動到頁面底部繼續(xù)加載

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)滾動條滾動到頁面底部繼續(xù)加載，原理很簡單，就是為window添加一個scroll事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2015-12-12
  • JS實(shí)現(xiàn)圖片翻書效果示例代碼

    JS實(shí)現(xiàn)圖片翻書效果示例代碼

    圖片翻書效果想必大家都有見過吧，在本文將為大家介紹下使用js是如何實(shí)現(xiàn)的，具體的代碼如下，感興趣的朋友可以參考下
    2013-09-09
  • js代碼規(guī)范之Eslint安裝與配置詳解

    js代碼規(guī)范之Eslint安裝與配置詳解

    這篇文章主要介紹了js代碼規(guī)范之Eslint安裝與配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • JS判斷元素是否在可視區(qū)域技巧詳解

    JS判斷元素是否在可視區(qū)域技巧詳解

    這篇文章主要為大家介紹了JS判斷元素是否在可視區(qū)域技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-12-12
  • JS通過識別id、value值對checkbox設(shè)置選中狀態(tài)

    JS通過識別id、value值對checkbox設(shè)置選中狀態(tài)

    最開始需要獲取的是input value值設(shè)置checkbox選中狀態(tài)，由于input value要使用計算業(yè)務(wù)，后來改造為id，這里就為大家分享一下實(shí)現(xiàn)代碼,需要的朋友可以參考下
    2020-02-02
  • 微信小程序?qū)崿F(xiàn)聯(lián)動選擇器

    微信小程序?qū)崿F(xiàn)聯(lián)動選擇器

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)聯(lián)動選擇器，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2019-02-02
  • javascript實(shí)現(xiàn)限制上傳文件大小

    javascript實(shí)現(xiàn)限制上傳文件大小

    這篇文章主要介紹了javascript實(shí)現(xiàn)限制上傳文件大小的方法和示例,需要的朋友可以參考下
    2015-02-02
  • JS實(shí)現(xiàn)的幻燈片切換顯示效果

    JS實(shí)現(xiàn)的幻燈片切換顯示效果

    這篇文章主要介紹了JS實(shí)現(xiàn)的幻燈片切換顯示效果,涉及javascript通過擴(kuò)展實(shí)現(xiàn)針對頁面元素的動態(tài)切換操作相關(guān)技巧,需要的朋友可以參考下
    2016-09-09

最新評論