快捷導(dǎo)航

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

更新時(shí)間：2021年03月18日 17:22:05 作者：程序猿余某人

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)彈框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(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";
}


//需要顯示時(shí)調(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;
}

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

您可能感興趣的文章:

js
彈框

相關(guān)文章

javascript計(jì)算漸變顏色的實(shí)例
這篇文章主要介紹了javascript計(jì)算漸變顏色的實(shí)例的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下
2017-09-09
js修改原型的屬性使用介紹
原型(prototype)定義了特定類型的所有實(shí)例都可以訪問的屬性和方法，很多些情況下需要重新對(duì)原型中的屬性賦值，下面為大家介紹下如何修改原型
2014-01-01
JavaScript大文件上傳的處理方法之切片上傳
這篇文章主要介紹了JavaScript大文件上傳的處理方法之切片上傳,切片上傳的原理較為簡(jiǎn)單，即獲取文件后切片，切片后整理好每個(gè)切片的參數(shù)并發(fā)請(qǐng)求即可
2022-06-06
淺談JavaScript工具鏈不完全指南
經(jīng)過這么多年的發(fā)展，JavaScript 早已經(jīng)不是當(dāng)年那個(gè)不太起眼的腳本語言。如今的 JavaScript 可以說是風(fēng)光無限，在 Web 前端、移動(dòng)端、服務(wù)端甚至物聯(lián)網(wǎng)設(shè)備上都大展身手，到處都有它的身影。
2021-05-05
JS常見算法詳解
本文主要介紹了前端常見算法的JS實(shí)現(xiàn)，具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02
javascript 獲取圖片尺寸及放大圖片
獲取圖片尺寸(不設(shè)置寬高)及放大圖片：利用了IE的私有屬性防止圖片放大失真嚴(yán)重！感興趣的朋友可以參考下
2013-09-09
微信小程序配置視圖層數(shù)據(jù)綁定相關(guān)示例
這篇文章主要為大家介紹了微信小程序配置視圖層數(shù)據(jù)綁定相關(guān)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪<BR>
2022-04-04
javascript實(shí)現(xiàn)tab切換的四種方法
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)tab切換的四種方法，并且對(duì)每個(gè)方法進(jìn)行了評(píng)價(jià)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2015-11-11
微信小程序中如何實(shí)現(xiàn)輪播圖效果
這篇文章主要介紹了微信小程序中實(shí)現(xiàn)輪播圖效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-03-03
徹底搞懂JS無縫滾動(dòng)代碼
徹底搞懂JS無縫滾動(dòng)代碼...
2007-01-01