実際の開発ではポップアップウィンドウがよく使われます。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 図2 背景レイヤーとコンテンツを別々に記述し、コンテンツを背景レイヤーで囲まないでください。こうすることで、コンテンツ領域をクリックしてもマスク レイヤーが閉じなくなります。 CSS を使用してマスク レイヤー付きの閉じられるポップアップ ウィンドウを実現する方法についての記事はこれで終わりです。CSS マスク レイヤー ポップアップ ウィンドウに関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
>>: ウェブページ内のFlash SWFファイルを変更する方法
Docker の作成Docker Compose は、複数の Docker コンテナを定義して実行す...
ドキュメント オブジェクト モデル (DOM) は、プログラムがドキュメントのコンテンツ、構造、およ...
実際の業務では、Excel からデータベースにデータをインポートする必要がある場合があります。データ...
個人アカウントのパスワードを変更する一般ユーザーが個人アカウントのパスワードを変更する場合は、他のコ...
REPLACE構文REPLACE(String,from_str,to_str)つまり、String...
Deepin がルートユーザーとして Google Chrome ブラウザを起動できない問題を解決す...
SecureCRT が文字化けした文字を表示する状況を見てみましょう。例えば: ではリセットしてみま...
1. at は、5 時間後にルート ディレクトリの at_test ファイルに「これは at タスク...
この記事では、ブルーグリーン デプロイメントと、nginx を使用してブルーグリーン デプロイメント...
この記事では、参考までにタイマーを実装するためのVueの具体的なコードを紹介します。具体的な内容は次...
多くのアプリやウェブサイトでは、ログインやアカウント登録の際にSMS認証コード1を送信する場所があり...
MySQL は、スウェーデンの会社 MySQL AB によって開発されたリレーショナル データベース...
Linux で FTP サーバーを設定するためのチュートリアルを参照してください https://w...
コンテナのIPアドレスを表示するdocker examine <コンテナ名またはID> ...
図に示すように: しかし、IE6で表示すると、right:1px:になります。 IE6 には、幅と高...