dans ce tutoriel, nous apprendrez à créer des manières contextuelles avec JavaScript (Windows de dialogue) sans utiliser de cadre de travail tel que Bootstrap ou un bibliothèque tierce. Nous allons tout créer à partir de zéro, offrant un contrôle complet sur la façon dont cela fonctionne et comment il a l’air.
Voici le spectacle que nous allons créer:
1. Commencez par le marquage de la page
créera d’abord un modal. Pour ce faire, nous ajouterons la classe .modal et une carte d’identité unique à un conteneur. Ensuite, nous spécifierons la boîte de dialogue en définissant un élément .modal-dialog comme élément secondaire direct de .modal. Le dialogue contiendra le contenu du modal. Il peut s’agir de tout type de contenu tel que du texte, des images, des éclaircissements, des notifications / des alertes utilisateur, etc.
« Une fenêtre de dialogue (ou modal) est un petit élément Interface utilisateur (UI) qui apparaît au premier plan sur un site Web, elle est généralement activée comme un avertissement de sorte que l’utilisateur ait quelque chose « – Adi Purdila
Ouvrez un modal, nous aurons besoin d’un élément avec l’attributdata-open(normalementbutton). La valeur de cet attribut doit être l’identifiant de la modale souhaitée.
Par défaut, un modal fermera si nous cliquons sur vos limites ou lorsque nous appuyons sur la touche Mais nous pouvons également le fermer si nous cliquons sur n’importe quel article avec l’attribut data-close (généralement button
Au début, le modal apparaîtra / disparaîtra avec un effet de décoloration. Mais nous avons la possibilité d’ajuster l’effet d’animation de dialogue à l’aide de l’attribut data-animation. la valeur de cet attribut qui doit être ajouté à .modal it Peut être l’une des valeurs suivantes:
-
slideInOutDown -
slideInOutTop -
slideInOutLeft -
slideInOutRight -
zoomInOut -
rotateInOutDown
Nous verrons plus de près ces valeurs dans une section suivante.
Pour l’instant, nous allons nous familiariser avec le marquage nécessaire représenter un seul modal:
<button type="button" class="open-modal" data-open="modal1">...</button><div class="modal"> <div class="modal-dialog"> <header class="modal-header"> ... <button class="close-modal" aria-label="close modal" data-close>✕</button> </header> <section class="modal-content">...</section> <footer class="modal-footer">...</footer> </div></div>
2. Définit certains styles de base
avec le marqué préparé, nous configurerons certains Variables CSS et nous allons redémarrer les styles:
:root { --lightgray: #efefef; --blue: steelblue; --white: #fff; --black: rgba(0, 0, 0, 0.8); --bounceEasing: cubic-bezier(0.51, 0.92, 0.24, 1.15);}* { padding: 0; margin: 0;}button { cursor: pointer; background: transparent; border: none; outline: none; font-size: inherit;}
Après, nous allons concentrer horizontalement et le contenu vertical D E la page. De plus, nous vous donnerons des styles au bouton chargé de l’ouverture du modal:
/*CUSTOM VARIABLES HERE*/body { display: flex; align-items: center; justify-content: center; height: 100vh; font: 16px/1.5 sans-serif;}.btn-group { text-align: center;}.open-modal { font-weight: bold; background: var(--blue); color: var(--white); padding: .75rem 1.75rem; margin-bottom: 1rem; border-radius: 5px;}
À ce stade, nous concentrerons notre attention sur les styles de Le modal.
Chaque modal disposera des caractéristiques suivantes:
- sera plein écran avec une position fixe. C’est-à-dire que cela sera considéré comme une superposition qui couvre toute la largeur et une grande de la fenêtre.
- aura une couleur de fond sombre.
- sera masqué par défaut.
- La boîte de dialogue sera centrée horizontalement et verticalement.
/*CUSTOM VARIABLES HERE*/.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--black); cursor: pointer; visibility: hidden; opacity: 0; transition: all 0.35s ease-in;}
La boîte de dialogue aura une largeur maximale et une hauteur. Sa hauteur sera 80% de la hauteur de la fenêtre. Dans les cas où sa hauteur dépasse cette valeur, une barre de défilement verticale apparaît:
/*CUSTOM VARIABLES HERE*/.modal-dialog { position: relative; max-width: 800px; max-height: 80vh; border-radius: 5px; background: var(--white); overflow: auto; cursor: default;}
Enfin, nous définirons quelques styles simples pour chacun des sections de contenu :
/*CUSTOM VARIABLES HERE*/.modal-dialog > * { padding: 1rem;}.modal-header,.modal-footer { background: var(--lightgray);}.modal-header { display: flex; align-items: center; justify-content: space-between;}.modal-header .modal-close { font-size: 1.5rem;}.modal p + p { margin-top: 1rem;}
3. Alternant le modal
une page peut avoir plus de modal . Mais comme mentionné ci-dessus, toutes les manières seront cachées au début.
ouvre le modal
De même, une page peut avoir plus d’un activateur ouvert (éléments avec l’attribut data-open). Chaque fois que vous cliquez sur un activateur, le modal associé doit être visible avec une animation apparaissant progressivement (FADE-IN). N’oubliez pas que la valeur de l’attribut data-open doit correspondre à l’ID d’un modal.
Voici le script qui révèle un identifiant modal:
classes CSS pertinents:
.modal { visibility: hidden; opacity: 0; transition: all 0.35s ease-in;}.modal.is-visible { visibility: visible; opacity: 1;}
Fermer le modal
avec notre implémentation Une fois qu’un modal ne peut apparaître que à la fois (ce code ne prend pas en charge les manières imbriquées). Comme mentionné dans la section de numérotation précédente, il existe trois méthodes disponibles pour le cacher avec un effet de décomposition (disparition).
Nous récapitulir.
Tout d’abord, en cliquant sur l’élément personnalisé situé à l’intérieur du modal:
const closeEls = document.querySelectorAll("");const isVisible = "is-visible";for (const el of closeEls) { el.addEventListener("click", function() { this.parentElement.parentElement.parentElement.classList.remove(isVisible); });}
second, en cliquant sur n’importe où à l’extérieur du modal:
const isVisible = "is-visible";document.addEventListener("click", e => { if (e.target == document.querySelector(".modal.is-visible")) { document.querySelector(".modal.is-visible").classList.remove(isVisible); }});
Dans ce cas, le modal (chevauchement) il se comporte comme une fermeture géante bouton. Pour cette raison, nous lui avons donné cursor: pointer.
Enfin, appuyez sur la touche Esc:
: :
const isVisible = "is-visible";document.addEventListener("keyup", e => { if (e.key == "Escape" && document.querySelector(".modal.is-visible")) { document.querySelector(".modal.is-visible").classList.remove(isVisible); }});
est un bon moment pour voir ce que nous avons créé jusqu’à présent:
L’aperçu modal très bon! Notez que chaque fois que nous cliquons sur un activateur ouvert, le modal correspondant est chargé.
prenons une autre étape et examine quelques idées pour encourager votre dialogue.
4. Ajouter des animations à la
boîte de dialogue Comme nous l’avons indiqué précédemment, le comportement par défaut du modal est une apparence progressive (fondu) et une décoloration progressive (disparition). Mais il y a la possibilité de régler l’effet d’animation de la fenêtre contextuelle.
J’ai déjà créé suffisamment d’effets d’animation que vous pourriez utiliser comme alternative à l’effet de décomposition. Pour ce faire, il vous suffit de passer l’attribut sur .modal
par exemple, si vous voulez Le dialogue apparaît avec une animation coulissante de gauche à droite, vous aurez besoin de l’effet slideInOutLeft.
Derrière des scènes, il existe deux règles qui réalisent cette animation:
/*CUSTOM VARIABLES HERE*/ .modal-dialog { opacity: 0; transform: translateX(-100%); transition: all 0.5s var(--bounceEasing);}.is-visible .modal-dialog { opacity: 1; transform: none; transition-delay: 0.2s;}
Vérifiez le mode modal avec ce type d’animation ici:
Vous pouvez vérifier le reste des animations en regardant l’onglet CSS de le projet de démonstration final. En fonction de la complexité des animations, j’ai utilisé des transitions ou des animations CSS pour les créer.
J’ai également utilisé la fonction cubic-bezier() pour régler la fonction temporelle de toutes les transitions. Si vous n’aimez pas l’effet de rebond, cela produit, n’hésitez pas à le modifier à quelque chose de plus lisse via la variable --bounceEasing CSS
regarder la dernière manifestation avec tous les effets Animation ici:
Conclusion
C’est tout, amis! Pendant ce didacticiel, nous avons appris à créer des dialogues de manière vivante personnalisée sans aucun cadre front-end.
J’espère que vous avez apprécié le résultat final et que votre création vous a aidé à mettre à jour vos compétences frontales. Terminer
Être présent que nous n’avons pas considéré l’accessibilité, donc si vous souhaitez améliorer cette démonstration, cela pourrait être la prochaine étape.
Comme toujours, merci de lire!
plus de lectures sur fenêtres contextuelles
-
plugins WordPressplus de 20 des meilleurs plugins WordPress pour émergeries et opt-innona blackman -
/ div>la meilleure façon d’utiliser les fenêtres de dialogue (modaux) dans votre conception Webadi purdila
WordPressComment créer des fenêtres contextuelles spectaculaires dans WordPress avec Elementor ProAdi Purpardila