108 lines
3.4 KiB
HTML
108 lines
3.4 KiB
HTML
Voici un exemple de composant React complet pour afficher un boîte de dialogue modale avec animations modernes et Tailwind-like utility classes :
|
|
|
|
HTML:
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Modal</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div class="fixed inset-0 flex items-center justify-center">
|
|
<div class="modal bg-[#282828] p-4 md:p-12 rounded-lg shadow-md w-[90vw] max-w-[500px] z-50">
|
|
<button class="close absolute top-2 right-2 text-lg text-white bg-red-500 px-2 py-1 rounded-md hover:invisible focus:invisible" data-bs-dismiss="modal">
|
|
<i class="fa fa-times"></i>
|
|
</button>
|
|
<h2 class="text-2xl text-white font-bold mb-4">Boîte de dialogue modale</h2>
|
|
<p class="text-lg text-white mb-6">
|
|
Cette boîte de dialogue modale vous permet de présenter du contenu important aux utilisateurs de votre site ou de votre application.
|
|
</p>
|
|
<button class="btn bg-green-500 text-white hover:bg-green-700 focus:ring-green-300 focus:ring-2 p-2 rounded-md w-full md:w-auto">Valider</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Import des bibliothèques JavaScript -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
|
|
<script src="https://kit.fontawesome.com/f2a9bdfc6b.js" crossorigin="anonymous"></script>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
CSS (dentique) :
|
|
```css
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.modal {
|
|
animation: fade 0.5s;
|
|
-webkit-animation: fade 0.5s;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
@keyframes fade {
|
|
from {
|
|
opacity: 0.4;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.close {
|
|
animation: close 0.5s;
|
|
-webkit-animation: close 0.5s;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
@keyframes close {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.modal {
|
|
max-width: 90vw;
|
|
}
|
|
}
|
|
```
|
|
|
|
JavaScript :
|
|
```javascript
|
|
function openModal() {
|
|
document.querySelector('.close').addEventListener('click', () => {
|
|
document.querySelector('.modal').style.animationName = 'close';
|
|
setTimeout(() => {
|
|
document.querySelector('.modal').style.display = 'none';
|
|
}, 500);
|
|
});
|
|
|
|
document.querySelector('.btn').addEventListener('click', () => {
|
|
alert('Fermer');
|
|
document.querySelector('.modal').style.animationName = 'close';
|
|
setTimeout(() => {
|
|
document.querySelector('.modal').style.display = 'none';
|
|
}, 500);
|
|
});
|
|
}
|
|
|
|
openModal();
|
|
```
|
|
|
|
Ce composant se présente comme suit :
|
|
|
|
* Une boîte de dialogue modale responsive, animée en apparaissant puis en disparaissant à l'ouverture et/ou à la fermeture.
|
|
* Le bouton pour fermer la boîte de dialogue utilisant l'Icooon « fa fa times » de Font Awesome.
|
|
* Un bouton "Valider" pour afficher un message d'alerte.
|
|
|
|
Il n'y a pas de fichier « index.html », comme vous l'avez demandé dans votre requête. Le HTML du composant est directement inséré dans le fichier défini ci-dessus. |