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

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ファイルを変更する方法

推薦する

自動ウェブページ更新と自動ジャンプのサンプルコード

ウェブページの自動更新: <head></head> の間に次のコードを追加...

グリッドはページのレイアウトプランです

<br /> 英語原文: http://desktoppub.about.com/od/...

JS は Baidu 検索ボックスを実装します

この記事の例では、Baidu検索ボックスを実装するためのJSの具体的なコードを参考までに共有していま...

Vueカスタムコンポーネントは双方向バインディングを実装します

シナリオ:一般的に使用される親コンポーネントと子コンポーネント間の相互作用方法は次のとおりです。親コ...

Angularルーティングサブルートの詳細な説明

目次1. サブルート構文2. 例1. 2つの新しいコンポーネントを作成し、その内容を変更する2. ル...

MySQL 5.7 の Docker バージョンを MySQL 8.0.13 にアップグレードし、データを移行する

目次1. 古いMySQL5.7データをバックアップする2. MySQL8.0.13のイメージをプルし...

ウェブページのテーブルの境界線を設定する方法

<br />前回は、Web テーブルにセルの線を設定する方法を学びました。今日は、Web...

純粋なCSSを使用してスイッチ効果を実現する

まずアイデアはこの効果を実現するには、 <input type="checkbox&...

MySQL mysqldump の使い方の詳しい説明

1. mysqldump の紹介mysqldump は、MySQL に付属する論理バックアップ ツー...

JSはショッピングカート効果の単純な加算と減算を実装します

この記事の例では、ショッピングカートの簡単な追加と削除を実現するためのJSの具体的なコードを参考まで...

Linux スワップメモリ​​を拡張する方法

スワップ メモリとは、主に物理メモリが不足している場合に、システムがハード ディスク領域の一部をサー...

Linux システムで MySQL の文字セットを UTF8 に変更する手順

目次1. データベース内の MySQL ステータスを確認します。 2. 設定ファイルを変更します。 ...

SQL でテーブルにフィールドとコメントを追加する方法

1. フィールドを追加します。 alter table テーブル名 ADD フィールド名 タイプ;例...

Dockerの核となる原則であるCgroupの詳細な説明

カーネル内の強力なツール cgroup は、NameSpace によって分離されたリソースを制限でき...

MySQL 5.5.27 winx64 のインストールと設定方法のグラフィックチュートリアル

1. インストールパッケージMYSQLサービスダウンロードアドレス:MySQL公式サイトからダウンロ...