實際開發(fā)中常常少不了使用彈窗，在學(xué)習(xí)css3的時候我發(fā)現(xiàn)可以通過純css實現(xiàn)帶遮罩層可關(guān)閉的彈窗。
使用CSS3實現(xiàn)帶遮罩層可關(guān)閉的彈窗需要用到 :target偽類，::before 、::after偽元素。
實現(xiàn)彈窗的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*關(guān)閉彈窗*/
.popBox {
display: none;
} /*打開彈窗*/
.popBox:target {
align-items: center;
display: flex;
justify-content: center;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/*設(shè)置彈窗內(nèi)容*/
.popBox .con {
background-color: rgba(250, 188, 199, 0.76);
border-radius: 5px;
padding: 1.5rem;
position: relative;
width: 25rem;
}
/*關(guān)閉按鈕*/
.popBox .close {
display: block;
position: relative;
}
.popBox .close::after {
align-items: center;
color: white;
content: "×";
cursor: pointer;
background-color: rgba(79, 79, 79, 0.9);
border-radius: 50%;
display: flex;
font-size: 1.25rem;
justify-content: center;
position: absolute;
right: -2.5rem;
top: -2.5rem;
height: 2rem;
width: 2rem;
z-index: 2;
}
/*彈窗遮罩層*/
.popBox::before {
content: "";
cursor: default;
background-color: rgba(173, 173, 173, 0.66);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<ul>
<li><a href="#example1">案例1</a></li>
<li><a href="#example2">案例2</a></li>
</ul>
<article class="popBox" id="example1">
<div class="con">
<a href="#" class="close"></a>
<p>案例，就是人們在生產(chǎn)生活當(dāng)中所經(jīng)歷的典型的富有多種意義的事件陳述。它是人們所經(jīng)歷的故事當(dāng)中的有意截取。案例一般包括三大要素。案例對于人們的學(xué)習(xí)、研究、生活借鑒等具有重要意義?；诎咐慕虒W(xué)是通過案例向人們傳遞有針對性的教育意義的有效載體。</p>
</div>
</article>
<article class="popBox" id="example2">
<div class="con">
<a href="#" class="close"></a>
<p>A case is a typical multi-meaning event statement that people experience in production and life. It is a deliberate interception of the stories people experience. Cases generally include three major elements. Cases are of great significance to people's learning, research, and life reference. Case-based teaching is an effective carrier to convey targeted educational significance to people through cases.</p>
新聞熱點
疑難解答
