CSS實(shí)現(xiàn)帶遮罩層可關(guān)閉的彈窗效果

發(fā)布時(shí)間：2020-03-09 14:45:19 作者：[子善]

這篇文章主要介紹了CSS實(shí)現(xiàn)帶遮罩層可關(guān)閉的彈窗效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

實(shí)際開(kāi)發(fā)中常常少不了使用彈窗，在學(xué)習(xí)css3的時(shí)候我發(fā)現(xiàn)可以通過(guò)純css實(shí)現(xiàn)帶遮罩層可關(guān)閉的彈窗。

使用CSS3實(shí)現(xiàn)帶遮罩層可關(guān)閉的彈窗需要用到 :target偽類，::before 、::after偽元素。

實(shí)現(xiàn)彈窗的代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*關(guān)閉彈窗*/
        .popBox {
            display: none;
        }

        /*打開(kāi)彈窗*/
        .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>案例，就是人們?cè)谏a(chǎn)生活當(dāng)中所經(jīng)歷的典型的富有多種意義的事件陳述。它是人們所經(jīng)歷的故事當(dāng)中的有意截取。案例一般包括三大要素。案例對(duì)于人們的學(xué)習(xí)、研究、生活借鑒等具有重要意義。基于案例的教學(xué)是通過(guò)案例向人們傳遞有針對(duì)性的教育意義的有效載體。</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>
    </div>
</article>
</body>
</html>

效果如下圖片所示

在這里插入圖片描述

知識(shí)點(diǎn)補(bǔ)充：

點(diǎn)擊遮罩層的背景關(guān)閉遮罩層

在模仿華為官方網(wǎng)頁(yè)的練習(xí)當(dāng)中我發(fā)現(xiàn)華為官網(wǎng)中有一個(gè)遮罩層是隨便點(diǎn)擊遮罩層的背景也能關(guān)閉掉遮罩層，但唯獨(dú)點(diǎn)擊內(nèi)容區(qū)域不會(huì)關(guān)閉掉遮罩層。于是我開(kāi)始模仿這個(gè)寫(xiě)案例，連內(nèi)容也一模一樣（因?yàn)檫@個(gè)練習(xí)就是要寫(xiě)出和華為關(guān)一樣的效果或則比它更好的效果），一開(kāi)始我是這樣子寫(xiě)的（圖1）

在這里插入圖片描述

圖1

class=Select_Region_bj 我給了一個(gè)灰色半透明的背景樣式，后來(lái)在Javascript中寫(xiě)onclick事件無(wú)論這么寫(xiě)，點(diǎn)擊內(nèi)容區(qū)也是會(huì)關(guān)閉掉遮罩層。我百思不得其解到底怎么樣寫(xiě)才能點(diǎn)擊內(nèi)容區(qū)不會(huì)關(guān)閉遮罩層，后來(lái)下課期間我看見(jiàn)我同學(xué)他寫(xiě)的帶能點(diǎn)擊內(nèi)容區(qū)不會(huì)關(guān)閉遮罩層。我問(wèn)他你是這么寫(xiě)的，他告訴我：“把他們分離就可以的了。”我思考了一會(huì)，腦補(bǔ)：分離？怎么分離？補(bǔ)著補(bǔ)著補(bǔ)著就補(bǔ)出了背景和內(nèi)容區(qū)分離。分離寫(xiě)（圖2）

在這里插入圖片描述