js實現(xiàn)彈框效果
更新時間：2021年03月18日 17:22:05 作者：程序猿余某人
這篇文章主要為大家詳細介紹了js實現(xiàn)彈框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)彈框效果的具體代碼，供大家參考，具體內(nèi)容如下
利用display來控制彈窗的現(xiàn)實和隱藏
<!-- 彈出層 --> <div id="popLayer"></div> <!--黑色蒙版 --> <div id="popBox"> <div class="close"> X </div> <div> <!-- 內(nèi)容 --> </div> </div>
js：
//點擊關閉按鈕
var close = document.querySelector(".close")
close.onclick = function () {
console.log("點擊")
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;
}
/*關閉按鈕*/
#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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了javascript計算漸變顏色的實例的相關資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下2017-09-09
原型(prototype)定義了特定類型的所有實例都可以訪問的屬性和方法，很多些情況下需要重新對原型中的屬性賦值，下面為大家介紹下如何修改原型2014-01-01
這篇文章主要介紹了JavaScript大文件上傳的處理方法之切片上傳,切片上傳的原理較為簡單，即獲取文件后切片，切片后整理好每個切片的參數(shù)并發(fā)請求即可2022-06-06
經(jīng)過這么多年的發(fā)展，JavaScript 早已經(jīng)不是當年那個不太起眼的腳本語言。如今的 JavaScript 可以說是風光無限，在 Web 前端、移動端、服務端甚至物聯(lián)網(wǎng)設備上都大展身手，到處都有它的身影。2021-05-05
本文主要介紹了前端常見算法的JS實現(xiàn)，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
獲取圖片尺寸(不設置寬高)及放大圖片：利用了IE的私有屬性防止圖片放大失真嚴重！感興趣的朋友可以參考下2013-09-09
這篇文章主要為大家介紹了微信小程序配置視圖層數(shù)據(jù)綁定相關示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪<BR>2022-04-04
這篇文章主要為大家詳細介紹了javascript實現(xiàn)tab切換的四種方法，并且對每個方法進行了評價，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了微信小程序中實現(xiàn)輪播圖效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
徹底搞懂JS無縫滾動代碼...2007-01-01