HTML、CSS、jQuery: 美しいモーダルを構築する
HTML、CSS、jQuery: 美しいモーダル ボックスを構築する
はじめに:
ポップアップ ウィンドウまたはモーダル ボックスは、Web ページでよく使用されます。情報を表示し、インタラクティブな効果を実現します。この記事では、HTML、CSS、jQuery を使用して美しいモーダル ボックスを構築する方法を、具体的なコード例とともに紹介します。
1. HTML 構造:
まず、モーダル ボックスに対応する HTML 構造を作成する必要があります。コードは次のとおりです。
<!DOCTYPE html> <html> <head> <title>漂亮的模态框</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <button class="open-btn">打开模态框</button> <div class="modal"> <div class="modal-content"> <span class="close-btn">×</span> <h1 id="这是一个漂亮的模态框">这是一个漂亮的模态框</h1> <p>欢迎使用模态框示例</p> </div> </div> <script src="jquery.min.js"></script> <script src="script.js"></script> </body> </html>
上記のコードでは、モーダル ボックスを開くボタンを作成し、モーダル ボックスのコンテナとして div
要素を使用します。モーダル ボックスのコンテンツは modal-content
の div
に配置され、閉じるボタンは span
要素と close-btn を使用します。
クラス名が設定されています。
2. CSS スタイル:
次に、モーダル ボックスにいくつかのスタイルを追加する必要があります。 style.css
という名前のファイルを作成し、次のスタイル コードをファイルに追加します:
.modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); animation-name: modalopen; animation-duration: 0.4s; } .close-btn { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close-btn:hover, .close-btn:focus { color: black; text-decoration: none; cursor: pointer; } @keyframes modalopen { from {transform: scale(0)} to {transform: scale(1)} }
上記のコードでは、以下で説明するいくつかの一般的な CSS スタイルが使用されています。
- #.modal
- クラスは、モーダルボックスの表示・非表示、位置、幅、高さ、背景色の設定など、モーダルボックスの基本的なスタイルを設定するために使用されます。
- クラスは、背景色、境界線、影などを含むモーダル ボックスのコンテンツのスタイルを設定するために使用されます。
- クラスは、色、フォント サイズなどを含む閉じるボタンのスタイルを設定するために使用されます。
- は、モーダル ボックスが縮小から拡大への遷移効果を持つようにアニメーション効果を定義するために使用されます。
最後に、jQuery を使用してモーダル ボックスの機能を実装します。
script.js というファイルを作成し、次のコードをファイルに追加します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>$(document).ready(function() {
$(".open-btn").click(function() {
$(".modal").fadeIn();
});
$(".close-btn").click(function() {
$(".modal").fadeOut();
});
});</pre><div class="contentsignin">ログイン後にコピー</div></div>上記のコードでは、jQuery の fadeIn()<p> と <code>fadeOut() を使用します。
モーダルボックスの表示と非表示を制御するメソッド。 結論:
HTML、CSS、jQueryの連携により美しいモーダルボックスを構築し、ボタンをクリックすると開き、閉じるボタンをクリックするとモーダルボックスを閉じる機能を実現しました。 。独自のニーズに応じて、モーダル ボックスのスタイルとインタラクションをカスタマイズおよび拡張できます。この記事がお役に立てば幸いです。
参考リンク:
jQuery公式ドキュメント:https://api.jquery.com/- CSSアニメーション:https://www.w3schools.com /css/css3_animations.asp
以上がHTML、CSS、jQuery: 美しいモーダルを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

このチュートリアルでは、PHPを使用してXMLドキュメントを効率的に処理する方法を示しています。 XML(拡張可能なマークアップ言語)は、人間の読みやすさとマシン解析の両方に合わせて設計された多用途のテキストベースのマークアップ言語です。一般的にデータストレージに使用されます

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。
