欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

這篇文章給大家分享的是有關(guān)CSS如何實(shí)現(xiàn)帶遮罩層可關(guān)閉的彈窗效果的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、枝江ssl等。為上1000家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的枝江網(wǎng)站制作公司

實(shí)際開發(fā)中常常少不了使用彈窗，在學(xué)習(xí)css3的時候我發(fā)現(xiàn)可以通過純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;
        }

        /*打開彈窗*/
        .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: "&times;";
            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>

效果如下圖片所示

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

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

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

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

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

圖1

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

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

圖2

把背景層和內(nèi)容區(qū)分開來寫，不要在背景層中包裹內(nèi)容，這樣子點(diǎn)擊內(nèi)容區(qū)就不會關(guān)閉掉遮罩層了！

感謝各位的閱讀！關(guān)于“CSS如何實(shí)現(xiàn)帶遮罩層可關(guān)閉的彈窗效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

分享標(biāo)題：CSS如何實(shí)現(xiàn)帶遮罩層可關(guān)閉的彈窗效果
轉(zhuǎn)載源于：http://chinadenli.net/article42/gsjpec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、用戶體驗(yàn)、做網(wǎng)站、移動網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司