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

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

我要評論

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

實際開發(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í)、研究、生活借鑒等具有重要意義。基于案例的教學(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>
    </div>
</article>
</body>
</html>

效果如下圖片所示

在這里插入圖片描述

知識點補充：

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

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

在這里插入圖片描述

圖1

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

在這里插入圖片描述