色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

手寫css彈框

劉柏宏2年前10瀏覽0評論

手寫css彈框是前端日常工作中的一項(xiàng)必備技能。特別是當(dāng)我們需要在網(wǎng)站上添加彈框模塊時,手寫css彈框是最為實(shí)用的一種方式。接下來我們來了解如何手寫css彈框。

/* css代碼開始 */
/* 遮罩層 */
.mask{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.3);
z-index: 999;
}
/* 彈框 */
.modal{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
z-index: 1000;
}
/* 關(guān)閉按鈕 */
.close{
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
cursor: pointer;
}
/* css代碼結(jié)束 */

以上是手寫css彈框的基礎(chǔ)CSS代碼。我們需要在HTML中添加遮罩層和彈框內(nèi)容,然后通過JavaScript動態(tài)控制遮罩層和彈框顯隱即可實(shí)現(xiàn)彈框模塊。

/* JavaScript代碼開始 */
// 獲取相關(guān)元素節(jié)點(diǎn)
var mask = document.querySelector('.mask');
var modal = document.querySelector('.modal');
var close = document.querySelector('.close');
// 彈框顯示函數(shù)
function showModal(){
mask.style.display = 'block';
modal.style.display = 'block';
}
// 彈框關(guān)閉函數(shù)
function closeModal(){
mask.style.display = 'none';
modal.style.display = 'none';
}
// 給關(guān)閉按鈕添加事件
close.addEventListener('click', closeModal);
// 初始化彈框,不顯示
mask.style.display = 'none';
modal.style.display = 'none';
/* JavaScript代碼結(jié)束 */

通過以上JS代碼,我們實(shí)現(xiàn)了彈框的顯示和關(guān)閉功能,并將關(guān)閉按鈕與關(guān)閉函數(shù)綁定。這樣畫面就可以正常展現(xiàn)彈框了。

以上就是手寫css彈框的全部內(nèi)容,通過這種方式我們可以輕松地實(shí)現(xiàn)網(wǎng)站中的彈框功能,并使網(wǎng)站展現(xiàn)更為炫酷的效果。