実際の開発ではポップアップウィンドウがよく使われます。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ファイルを変更する方法
ウェブページの自動更新: <head></head> の間に次のコードを追加...
<br /> 英語原文: http://desktoppub.about.com/od/...
この記事の例では、Baidu検索ボックスを実装するためのJSの具体的なコードを参考までに共有していま...
シナリオ:一般的に使用される親コンポーネントと子コンポーネント間の相互作用方法は次のとおりです。親コ...
目次1. サブルート構文2. 例1. 2つの新しいコンポーネントを作成し、その内容を変更する2. ル...
目次1. 古いMySQL5.7データをバックアップする2. MySQL8.0.13のイメージをプルし...
<br />前回は、Web テーブルにセルの線を設定する方法を学びました。今日は、Web...
まずアイデアはこの効果を実現するには、 <input type="checkbox&...
1. mysqldump の紹介mysqldump は、MySQL に付属する論理バックアップ ツー...
この記事の例では、ショッピングカートの簡単な追加と削除を実現するためのJSの具体的なコードを参考まで...
スワップ メモリとは、主に物理メモリが不足している場合に、システムがハード ディスク領域の一部をサー...
目次1. データベース内の MySQL ステータスを確認します。 2. 設定ファイルを変更します。 ...
1. フィールドを追加します。 alter table テーブル名 ADD フィールド名 タイプ;例...
カーネル内の強力なツール cgroup は、NameSpace によって分離されたリソースを制限でき...
1. インストールパッケージMYSQLサービスダウンロードアドレス:MySQL公式サイトからダウンロ...