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

推薦する

Docker Composeオーケストレーションツールの詳細な説明

Docker の作成Docker Compose は、複数の Docker コンテナを定義して実行す...

W3C チュートリアル (11): W3C DOM アクティビティ

ドキュメント オブジェクト モデル (DOM) は、プログラムがドキュメントのコンテンツ、構造、およ...

Java は Excel から MySQL にデータをインポートします

実際の業務では、Excel からデータベースにデータをインポートする必要がある場合があります。データ...

Linux アカウントのパスワードを変更する詳細な例

個人アカウントのパスワードを変更する一般ユーザーが個人アカウントのパスワードを変更する場合は、他のコ...

MySQLで置換関数を実装するためのいくつかの実用的なシナリオ

REPLACE構文REPLACE(String,from_str,to_str)つまり、String...

Linux は、Deepin がルートユーザーとして Google Chrome ブラウザを起動できない問題を解決します

Deepin がルートユーザーとして Google Chrome ブラウザを起動できない問題を解決す...

Linux SecureCRT の文字化けの解決方法

SecureCRT が文字化けした文字を表示する状況を見てみましょう。例えば: ではリセットしてみま...

RHCEはApacheをインストールし、ブラウザでIPにアクセスします

1. at は、5 時間後にルート ディレクトリの at_test ファイルに「これは at タスク...

nginx を使用してブルーグリーン デプロイメントをシミュレートする方法

この記事では、ブルーグリーン デプロイメントと、nginx を使用してブルーグリーン デプロイメント...

Vueタイマーの実装方法

この記事では、参考までにタイマーを実装するためのVueの具体的なコードを紹介します。具体的な内容は次...

JavaScriptを使用してSMS認証コード間隔を送信する機能を実装する

多くのアプリやウェブサイトでは、ログインやアカウント登録の際にSMS認証コード1を送信する場所があり...

MySQLデータベースは何をするのか

MySQL は、スウェーデンの会社 MySQL AB によって開発されたリレーショナル データベース...

Linux で FTP イメージ サーバーをインストールして展開する方法

Linux で FTP サーバーを設定するためのチュートリアルを参照してください https://w...

Dockerはコンテナにポートを動的に公開します

コンテナのIPアドレスを表示するdocker examine <コンテナ名またはID> ...

IE6 で幅と高さがおかしいバグ

図に示すように: しかし、IE6で表示すると、right:1px:になります。 IE6 には、幅と高...