Maison >interface Web >js tutoriel >HTML, CSS et jQuery : créez un magnifique modal
HTML, CSS et jQuery : créez un magnifique modal
- 王林original
- 2023-10-25 12:03:531252parcourir
HTML, CSS et jQuery : créez une belle boîte modale
Introduction :
Les fenêtres contextuelles ou boîtes modales sont souvent utilisées dans les pages Web pour afficher des informations et obtenir des effets interactifs. Cet article expliquera comment utiliser HTML, CSS et jQuery pour créer une belle boîte modale, avec des exemples de code spécifiques.
1. Structure HTML :
Tout d'abord, nous devons créer une structure HTML pour accueillir la boîte modale. Le code est le suivant :
<!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>Dans le code ci-dessus, nous créons un bouton qui ouvre la boîte modale et utilisons un élément div comme conteneur de la boîte modale. Le contenu de la boîte modale est placé dans un div de modal-content. Le bouton de fermeture utilise un élément span et définit un . Le nom de classe de close-btn. div元素作为模态框的容器。模态框的内容放在一个modal-content的div中，关闭按钮使用一个span元素，并设置了一个close-btn的类名。
二、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类用于设置模态框的基本样式，包括设置模态框的显示隐藏、定位、宽高、背景色等。 -
.modal-content类用于设置模态框内容的样式，包括背景色、边框、阴影等。 -
.close-btn类用于设置关闭按钮的样式，包括颜色、字体大小等。 -
@keyframes用于定义一个动画效果，使模态框从缩小到放大的过程具有过渡效果。
三、jQuery脚本：
最后，我们使用jQuery来实现模态框的功能。创建一个名为script.js的文件，并将下面的代码添加到该文件中：
$(document).ready(function() {
$(".open-btn").click(function() {
$(".modal").fadeIn();
});
$(".close-btn").click(function() {
$(".modal").fadeOut();
});
});以上代码使用了jQuery的fadeIn()和fadeOut()
style.css et ajoutez le code de style suivant au fichier : rrreee
Le code ci-dessus utilise certains styles CSS courants, qui sont expliqués comme suit :.modal est utilisée pour définir le style de base de la boîte modale, y compris la définition de l'affichage et du masquage, le positionnement, la largeur, la hauteur, la couleur d'arrière-plan, etc. de la boîte modale. La classe -
.modal-contentest utilisée pour définir le style du contenu de la boîte modale, y compris la couleur d'arrière-plan, la bordure, l'ombre, etc. La classe -
.close-btnest utilisée pour définir le style du bouton de fermeture, y compris la couleur, la taille de la police, etc.
@keyframes est utilisé pour définir un effet d'animation afin que la boîte modale ait un effet de transition du rétrécissement à l'agrandissement. 🎜🎜3. Script jQuery : 🎜🎜Enfin, nous utilisons jQuery pour implémenter la fonction de la boîte modale. Créez un fichier appelé script.js et ajoutez le code suivant au fichier : 🎜rrreee🎜Le code ci-dessus utilise fadeIn() et fadeOut() de jQuery. code> méthode pour contrôler l’affichage et le masquage de la boîte modale. 🎜🎜Conclusion : 🎜🎜Grâce à la coopération de HTML, CSS et jQuery, nous avons construit une belle boîte modale et implémenté la fonction consistant à cliquer sur le bouton pour ouvrir et à cliquer sur le bouton de fermeture pour fermer la boîte modale. Vous pouvez personnaliser et étendre le style et l'interaction de la boîte modale en fonction de vos propres besoins. J'espère que cet article vous sera utile. 🎜🎜Lien de référence : 🎜🎜🎜Documentation officielle jQuery : https://api.jquery.com/🎜🎜Animation CSS : https://www.w3schools.com/css/css3_animations.asp🎜🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!