CSSモーダルポップアップの例
純粋なCSSを使用してモーダルポップアップウィンドウを実装して、可視および非表示のチェックボックスを制御します。 1。入力[type = "チェックボックス"]をステータススイッチとして使用します。 2。使用：モーダルボックスの表示を制御するために.Modalをチェックしました。 3. [for]ラベルを使用して、チェックをトリガーしてオンとオフを達成します。 4. @KeyFramesアニメーションを追加して、フェードインポップアップ効果を実現します。 5.モーダルボックスの閉じるボタンまたはマスククリック領域は、ラベルコントロールを非表示にすることができます。プロセス全体では、JavaScriptを必要とせず、非常に互換性があり、アクセスしやすく、静的ページや軽量のインタラクティブなシナリオに適しています。
純粋なCSSの実装されたモーダルポップアップウィンドウ（モーダルポップアップ）は、javascriptを使用せずに:target擬似クラスまたはcheckbox labelを介して可視および非表示を制御できます。以下は、隠されたチェックボックスを使用してディスプレイを制御し、より安定した体験をするために閉じる、シンプルで実用的で再利用可能なCSSモーダルボックスの例です。
pure純粋なCSSモーダルポップアップの例
<！doctype html>
<html lang = "zh">
<head>
<Meta charset = "utf-8" />
<Title> CSSモーダルポップアップの例</title>
<style>
/*基本リセット*/
* {
マージン：0;
パディング：0;
ボックスサイズ：ボーダーボックス;
}
体 {
フォントファミリー：arial、sans-serif;
背景色：＃f4f4f4;
パディング：20px;
}
/*ボタンスタイル*/
.btn-open {
パディング：10px 18px;
バックグラウンドカラー：＃007bff;
色：白;
国境：なし;
ボーダーラジウス：4px;
カーソル：ポインター;
フォントサイズ：16px;
}
/*モーダルバックグラウンドマスク*/
.modal {
表示：なし;
位置：修正;
上：0;
左：0;
幅：100％;
高さ：100％;
背景色：RGBA（0、0、0、0.5）;
justify-content：center;
Align-Items：Center;
z-index：1000;
}
/*チェックボックス制御モーダルボックスディスプレイと非表示*/
＃modal-toggle {
表示：なし;
}
＃modal-toggle：checked .modal {
ディスプレイ：Flex;
}
/*モーダルコンテンツボックス*/
.modal-content {
背景：白。
幅：90％;
最大幅：500px;
パディング：20px;
ボーダーラジウス：8px;
Box-Shadow：0 4px 15px RGBA（0、0、0、0.2）;
位置：相対;
アニメーション：Fadein 0.3s Ease-Out;
}
/*閉じるボタン*/
.Modal-Close {
位置：絶対;
トップ：10px;
右：15px;
フォントサイズ：24px;
色：＃aaa;
テキスト装置：なし;
Line-Height：1;
カーソル：ポインター;
}
.Modal-Close：Hover {
色：＃000;
}
/*アニメーション効果*/
@keyframes fadein {
から {
不透明：0;
変換：スケール（0.9）;
}
に {
不透明：1;
変換：スケール（1）;
}
}
</style>
</head>
<body>
<！ - トリガーボタン - >
<label for = "modal-toggle" class = "btn-open">モーダルボックスを開きます</label>
<！ - 非表示のチェックボックス - >
<入力型= "チェックボックス" id = "modal-toggle" />
<！ - モーダルボックス - >
<div class = "modal">
<div class = "modal-content">
<a href = "＃" class = "modal-close" onclick = "document.getElementbyid（ 'modal-toggle'）。checked = false;">×</a>
<h2>モーダルボックスタイトル</h2>
<p>これはモーダルボックスのコンテンツです。フォーム、画像、またはその他のコンテンツを追加できます。 </p>
<label for = "modal-toggle" style = "margin-top：10px; display：inline-block; padding：8px 12px; background：＃6c757d; color：white; border-radius：4px; cursor：pointer;"> close </label>
</div>
</div>
</body>
</html>？キーポイント説明
-
javascriptは表示されないと暗黙的な制御：
<input type="checkbox" id="modal-toggle">and:checked .modalを制御するように使用します。 -
マスクの外側の領域をクリックして閉じます
.modalに擬似エレメントを追加するか、ラベルクリックを聞くことができますが、この場合は「閉じる」リンクまたはボタンで閉じる方が安全です。 -
サポートアニメーション：
@keyframesを使用して、フェードインポップアップ効果を実現します。 -
アクセシビリティ：
label[for]使いやすさと明確なセマンティクスを向上させます。
optionオプションの改善
- マスクレイヤーをクリックして閉じます
.modalにlabelを追加して、for="modal-toggle"バックグラウンドレイヤーをカバーできます。 - 使用
:targetターゲットはよりシンプルですが、URLは（#modalなど）変化し、すべてのシナリオに適していません。
？ヒント
- よりモダンな方法が必要な場合は、敏感なユーザーのアニメーションの不快感を避けるために
prefers-reduced-motionを組み合わせることができます。 -
overflow-y: autoを追加して、コンテンツがオーバーフローしないようにしてください。
基本的には、複雑ではありませんが、実用的です。このコードをHTMLファイルにコピーして、テストを直接実行できます。
以上がCSSモーダルポップアップの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undress AI Tool
脱衣画像を無料で
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
CSSバックドロップフィルタープロパティを使用する方法は？
Aug 02, 2025 pm 12:11 PM
バックドロップフィルターは、要素の背後にあるコンテンツに視覚効果を適用するために使用されます。 1。バックドロップフィルター：Blur（10px）およびその他の構文を使用して、つや消しガラス効果を実現します。 2。ぼやけ、明るさ、コントラストなどの複数のフィルター関数をサポートし、重ねることができます。 3.ガラスカードの設計でよく使用されており、要素が背景と重複するようにする必要があります。 4.最新のブラウザには優れたサポートがあり、@Supportsを使用してダウングレードソリューションを提供できます。 5。パフォーマンスを最適化するために、過度のぼかしと頻繁な再描画を避けてください。この属性は、要素の背後にコンテンツがある場合にのみ有効になります。
CSSアスペクト比プロパティとの使用方法は何ですか？
Aug 04, 2025 pm 04:38 PM
Theaspect-ratioCSSpropertydefinesthewidth-to-heightratioofanelement,ensuringconsistentproportionsinresponsivedesigns.1.Itisapplieddirectlytoelementslikeimages,videos,orcontainersusingsyntaxsuchasaspect-ratio:16/9.2.Commonusecasesincludemaintainingres
CSSでバウンスアニメーションを作成する方法は？
Aug 02, 2025 am 05:44 AM
@keyframesbouncewith0％、100％attranslatey（0）および50％attranslatey（-20px）tocreateabasicbounce.2.applytheanimation to nelementusinginimation：Bounce0.6 sease-inutinfiniteforsmoth.
CSSの使用方法：空の擬似クラス？
Aug 05, 2025 am 09:48 AM
The：emptypseudo-classselecteselementswithnochildrenorcontent、includingspacesorcomments、aonterlytrulyelementslikematchit;
仮想通貨取引アプリとは何ですか？_ 2025年にトップ10の推奨公式仮想通貨取引アプリ
Aug 08, 2025 pm 06:42 PM
1. Binanceは、膨大なトランザクションボリュームと豊富な取引ペアで知られています。多様な取引モデルと完璧なエコシステムを提供します。また、SAFUファンドと複数のセキュリティテクノロジーを通じてユーザー資産のセキュリティを保証し、準拠した運用を非常に重要にします。 2。OKXOUYIは、幅広いデジタル資産取引サービスと統一された取引アカウントモデルを提供し、Web3フィールドを積極的に展開し、厳格なリスク管理とユーザー教育を通じてトランザクションセキュリティと経験を改善します。 3。GATE.IOセサミはドアを開き、通貨速度と豊富な通貨を備え、多様な取引ツールと付加価値サービスを提供し、複数のセキュリティ検証メカニズムを採用し、ユーザーの信頼を強化するための資産準備を遵守します。 4。Huobiは、深い業界の蓄積を備えたワンストップのデジタル資産サービスを提供し、強いトランザクションの深さと
クリエイティブな形状にCSSクリップパスを使用する方法は？
Aug 04, 2025 pm 02:55 PM
CSSCLIP-PATHを使用して、追加の画像や複雑なSVGなしでブラウザに非長方形の形状を作成します。 2。一般的な形状関数には、INSET（）、Circle（）、Ellipse（）、Polygon（）が含まれます。ここで、ポリゴン（）は、ダイアログバブルなどの創造的なデザインを作成するのに適した座標ポイントを定義することでカスタムシェイプを実装します。 3.クリップパスは、ホバリング中のサークル拡張など、CSS遷移またはキーフレームアニメーションを通じて動的効果を達成できますが、同じタイプの間隔アニメーションと頂点の数のみをサポートします。 4.応答性とアクセシビリティに注意して、サポートされていないときにコンテンツがまだ利用可能であることを確認し、テキストが読み取り可能であり、過度の収穫を避け、ポリゴン頂点の数を制御してパフォーマンスを最適化します。同時に、それを知る必要があります
CSSのみのアコーディオンメニューを作成する方法は？
Aug 03, 2025 pm 01:48 PM
非表示のチェックボックスとCSSを使用してください。隣接する兄弟セレクター（）と組み合わせたチェックされた擬似クラス（）を制御するコンテンツディスプレイ。 2. HTML構造には、崩壊したアイテムごとに入力、ラベル、コンテンツDIVが含まれています。 3.最大高さの遷移を設定することにより、スムーズな拡張/崩壊アニメーション。 4.擬似要素を使用してオープン/クローズステータスアイコンを追加します。 5.無線タイプを使用してシングルオープンモードを実装しますが、チェックボックスを使用すると複数の開口部が可能になります。これは、JavaScriptを必要とせず、最新のブラウザーと互換性のあるインタラクティブな折りたたみ式メニューの実装です。
CSSでテキストグラデーションを作成する方法は？
Aug 01, 2025 am 07:39 AM
バックグラウンドイメージとバックグラウンドクリップ：テキストを使用して、CSSテキストグラデーション効果を達成します。 2. [Webkit-Background-Clip：Text and -Webkit-Text-Fill-Color：透過性]を設定する必要があります。 3.線形または放射状の勾配をカスタマイズすることができ、視覚効果を改善するために太字または大きなテキストを使用することをお勧めします。 4.サポートされていない環境の代替色として色を設定することをお勧めします。 5.代替案は、より複雑な効果を達成するために-webkit-mask-imageを使用できますが、主に高度なシナリオに適しています。この方法はシンプルで、互換性と視覚が良好です
