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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JS學習筆記之貪吃蛇小游戲demo,結合實例形式詳細分析了javascript實現(xiàn)貪吃蛇小游戲的原理、步驟與相關實現(xiàn)技巧,需要的朋友可以參考下2019-05-05
一種很常見的寫法,大家都是這樣寫的，但如果這樣的代碼，殺毒軟件認為是病毒的吧，就太惡劣的。判斷能力也太差了。2009-09-09
這篇文章主要為大家詳細介紹了js實現(xiàn)滾動條滾動到頁面底部繼續(xù)加載，原理很簡單，就是為window添加一個scroll事件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-12-12
圖片翻書效果想必大家都有見過吧，在本文將為大家介紹下使用js是如何實現(xiàn)的，具體的代碼如下，感興趣的朋友可以參考下2013-09-09
這篇文章主要介紹了js代碼規(guī)范之Eslint安裝與配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家介紹了JS判斷元素是否在可視區(qū)域技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
JS通過識別id、value值對checkbox設置選中狀態(tài)
最開始需要獲取的是input value值設置checkbox選中狀態(tài)，由于input value要使用計算業(yè)務，后來改造為id，這里就為大家分享一下實現(xiàn)代碼,需要的朋友可以參考下2020-02-02
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)聯(lián)動選擇器，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
這篇文章主要介紹了javascript實現(xiàn)限制上傳文件大小的方法和示例,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了JS實現(xiàn)的幻燈片切換顯示效果,涉及javascript通過擴展實現(xiàn)針對頁面元素的動態(tài)切換操作相關技巧,需要的朋友可以參考下2016-09-09