CSSは、閉じることができるマスクレイヤーを備えたポップアップウィンドウ効果を実装します。

実際の開発ではポップアップウィンドウがよく使われます。CSS3を勉強していたときに、閉じることができるマスクレイヤー付きのポップアップウィンドウを純粋なCSSで実装できることに気付きました。

CSS3 を使用して閉じられるマスクレイヤーを持つポップアップウィンドウを実装するには、:target 疑似クラス、::before および ::after 疑似要素を使用する必要があります。

ポップアップウィンドウを実装するコード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
    <スタイル>
        /*ポップアップウィンドウを閉じる*/
        .popBox{
            表示: なし;
        }

        /*ポップアップウィンドウを開く*/
        .popBox:ターゲット{
            アイテムの位置を中央揃えにします。
            ディスプレイ: フレックス;
            コンテンツの中央揃え: 中央;
            位置: 絶対;
            左: 0;
            右: 0;
            上: 0;
            下部: 0;
        }

        /*ポップアップコンテンツを設定する*/
        .popBox .con {
            背景色: rgba(250, 188, 199, 0.76);
            境界線の半径: 5px;
            パディング：1.5rem;
            位置: 相対的;
            幅: 25rem;
        }

        /*閉じるボタン*/
        .popBox .close {
            表示: ブロック;
            位置: 相対的;
        }

        .popBox .close::after {
            アイテムの位置を中央揃えにします。
            色: 白;
            内容: "×";
            カーソル: ポインタ;
            背景色: rgba(79, 79, 79, 0.9);
            境界線の半径: 50%;
            ディスプレイ: フレックス;
            フォントサイズ: 1.25rem;
            コンテンツの中央揃え: 中央;
            位置: 絶対;
            右: -2.5rem;
            上部: -2.5rem;
            高さ: 2rem;
            幅: 2rem;
            zインデックス: 2;
        }

        /*ポップアップウィンドウマスク*/
        .popBox::before {
            コンテンツ： "";
            カーソル: デフォルト;
            背景色: rgba(173, 173, 173, 0.66);
            位置: 固定;
            左: 0;
            右: 0;
            上: 0;
            下部: 0;
        }
    </スタイル>
</head>
<本文>
<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="閉じる"></a>
        <p>ケースとは、人々が生産活動や生活の中で経験する、複数の意味を持つ出来事の典型的な記述です。それは人々が経験する物語からの意図的な抜粋です。ケースは通常、3 つの主要な要素で構成されます。事例は人々の学習、研究、人生の参考として大きな意義を持っています。事例に基づく教育は、事例を通じて人々に的を絞った教育的意義を伝える効果的な手段です。 </p>
    </div>
</記事>

<article class="popBox" id="example2">
    <div class="con">
        <a href="#" class="閉じる"></a>
        <p>ケースとは、人々が生産や生活の中で経験する典型的な多意味イベント ステートメントです。これは、人々が経験するストーリーを意図的に傍受したものです。ケースには通常、3 つの主要な要素が含まれます。ケースは、人々の学習、研究、および生活の参考にとって非常に重要です。ケース ベースの教育は、ケースを通じて人々に対象を絞った教育的意義を伝える効果的な手段です。</p>
    </div>
</記事>
</本文>
</html>

効果は次の図に示されています

ここに画像の説明を挿入

追加の知識ポイント:

マスクレイヤーの背景をクリックしてマスクレイヤーを閉じます

Huaweiの公式サイトを真似してみたところ、Huaweiの公式サイトにはマスクレイヤーがあることがわかりました。マスクレイヤーの背景をクリックするとマスクレイヤーを閉じることができますが、コンテンツ領域をクリックしてもマスクレイヤーは閉じられません。そこで私はこのケーススタディを真似して書き始めましたが、内容も全く同じでした（この演習の目的はHuaweiと同じかそれ以上の効果を書くことでした）。最初はこのように書きました（図1）

ここに画像の説明を挿入

図1

class=Select_Region_bj灰色の半透明の背景スタイルを指定し、その後、onclick イベントを Javascript で記述しました。どのように記述しても、コンテンツ領域をクリックするとマスクレイヤーが閉じます。クリックしてもコンテンツ領域が閉じないようにするには、どのように記述すればよいのかわかりませんでした。その後、休憩中に、クラスメイトがマスクレイヤーを閉じずにコンテンツ領域をクリックできるプログラムを作成したことを知りました。どうやって書いたのかと聞いたら、「分けて書くだけ」と言われた。しばらく考えて、「分ける？」と思った。どうやって分けるの？パッチを当て続けるうちに、最終的に背景領域とコンテンツ領域を分離しました。個別書き込み（図2）

ここに画像の説明を挿入

図2

背景レイヤーとコンテンツを別々に記述し、コンテンツを背景レイヤーで囲まないでください。こうすることで、コンテンツ領域をクリックしてもマスクレイヤーが閉じなくなります。

CSS を使用してマスクレイヤー付きの閉じられるポップアップウィンドウを実現する方法についての記事はこれで終わりです。CSS マスクレイヤーポップアップウィンドウに関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: 一般的でない js 演算演算子の概要

>>: ウェブページ内のFlash SWFファイルを変更する方法