ホームページ > 記事 > ウェブフロントエンド > HTML、CSS、jQuery: 美しいモーダルを構築する
HTML、CSS、jQuery: 美しいモーダルを構築する
- 王林オリジナル
- 2023-10-25 12:03:531159ブラウズ
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>这是一个漂亮的模态框</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 というファイルを作成し、次のコードをファイルに追加します。 <pre class='brush:javascript;toolbar:false;'>$(document).ready(function() {
$(".open-btn").click(function() {
$(".modal").fadeIn();
});
$(".close-btn").click(function() {
$(".modal").fadeOut();
});
});</pre>上記のコードでは、jQuery の
と fadeOut() を使用します。 モーダルボックスの表示と非表示を制御するメソッド。 結論:
HTML、CSS、jQueryの連携により美しいモーダルボックスを構築し、ボタンをクリックすると開き、閉じるボタンをクリックするとモーダルボックスを閉じる機能を実現しました。 。独自のニーズに応じて、モーダル ボックスのスタイルとインタラクションをカスタマイズおよび拡張できます。この記事がお役に立てば幸いです。
参考リンク：
jQuery公式ドキュメント：https://api.jquery.com/- CSSアニメーション：https://www.w3schools.com /css/css3_animations.asp
以上がHTML、CSS、jQuery: 美しいモーダルを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。