Caractéristiques

• CSS, Normalize.css, JS, jQuery (en plus de AnimatedModal CSS et JS)
• Les exemples ci-dessous sont ceux que l'on télécharge en démo avec le plugin
• Chicago, Illinois, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [03-03-2022 / 03-03-2022]

Caractéristiques

• Plugin Javascript : bootbox.all.min.js
• Utilise Bootstrap.css dans la version 4.3.1 pour la partie présentation. J'ai trouvé que le plugin fonctionnait mieux avec la 4.3.1 qu'avec la 4.0.0 que j'avais d'abord utilisée.
• Utilise aussi jQuery, Popper voire Animate.js
• La version de BootBox dépend de la version de Bootstrap que vous utilisez
• Fermer obligatoirement avec un clic sur la croix sur les exemples présentés sur le site

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [31-10-2020 / 24-01-2021]

Caractéristiques

• Bulma est un framework CSS basé sur Flexbox.
• Il est Open Source
• Il faut télécharger tout le framework pour ne retenir que ce dont on a besoin

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [21-11-2021 / 21-11-2021]

Caractéristiques

• Bibliothèque Javascript
• Utilise jQuery et Bootstrap dans la version 3
• Très léger. 400 lignes de JavaScript, 100 de CSS, moins de 6 Ko
• Featherlight fonctionne sur de très nombreux sites

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [09-12-2020 / 24-01-2021]

Caractéristiques

• Bibliothèque Javascript
• De nombreuses possibilités
• Ouvrez plusieurs boîtes de dialogue à la fois et fermez-les individuellement ou toutes à la fois

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [25-10-2021 / 25-10-2021]

Caractéristiques

• Bibliothèque Javascript
• De très nombreuses possibilités
• Sic : Bon mélange de qualité, de flexibilité et d'accessibilité.
• Prise en charge WCAG 2.0 niveau AA

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [25-10-2021 / 25-10-2021]

Caractéristiques

• Zebra_Dialog est une petite bibliothèque qui utilise jQuery
• Zebra_Dialog peut générer 6 types de boîtes de dialogue : confirmation, information, avertissement, invite, erreur et question.
• Sous licence GNU Lesser General Public License v3.0.
• Affichage des informations ligne par ligne, en douceur, j'aime beaucoup (à l'image de son site personnel)
• Salzbourg, Autriche

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [13-11-2021 / 13-11-2021]

Caractéristiques

• Bibliothèque Bootstrap 4
• CSS; jQuery, Popper.js, Mdb.js
• Le choix de l'embarras et plus rien à faire

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [01-01-2021 / 12-03-2021]

Caractéristiques

• CSS pur ou quasi
• Optimisé pour le mobile
• Extra !

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [07-04-2021 / 07-04-2021]

Caractéristiques

• Plugin Javascript en v10.10.0 au 11-11-2020
• Très peu de dépendances, c'est un avantage
• Exemples de toutes les possibilités
• Poposition de login form
• Très riche

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [31-10-2020 / 12-03-2021]

Caractéristiques

• Plugin en pur Javascript
• Rien à utiliser sauf : tingle.min.css et tingle.min.js
• Plusieurs possibilités avec le tuto de paramétrage
• Exemples bien choisis

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [31-10-2020 / 12-03-2021]

Caractéristiques

• jBox est un plugin jQuery qui facilite la création d'info-bulles personnalisables, de fenêtres modales, de galeries d'imageset de notices
• Sic: Poids léger; Personnalisation facile de vos propres plugins jBox; jBox s'adapte à tous vos appareils
• Plugin très 'propre' et toujours maintenu

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [21-11-2021 / 21-11-2021]

Caractéristiques

• CSS, Normalize.css
• Rollovers bien utiles
• On se passe de Javascript grâce au sélecteur 'target'
• Pour fermer la fenêtre on clique à côté de celle-ci, n'importe où
• Chicago, Illinois, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [03-03-2022 / 03-03-2022]

Caractéristiques

• CSS pur
• Rollover sur le bouton et sur la croix de sortie
• La fenêtre apparaît d'un coup, centrée
• Le fond est opacifié 'transparent'
• Madrid, Espagne

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [14-08-2022 / 14-08-2022]

Caractéristiques

• CSS pur
• C'est tout simple. On se passe de Javascript grâce à l'attribut de class 'target'
• Il faut fermer la fenêtre avec la croix
• L'auteur fréquente la planète Terre

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [03-03-2022 / 03-03-2022]

Caractéristiques

• CSS, Normalize.css
• La modale ne prend qu'une partie de l'écran au dessus de 600px et tout l'écran en dessous
• New Jersey, USA

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [12-01-2022 / 12-01-2022]

Caractéristiques

• CSS absolument pur
• Système sans aucune dépendance
• Fermeture avec le bouton

Image cliquable pour voir l'exemple

Site web

Site de l'auteur

[Créé / modifié] [10-10-2021 / 10-10-2021]

Caractéristiques

• CSS, Normalize.css
• Système sans aucune dépendance
• Fermeture avec la croix ou par clic hors modale
• C'est simple, ça fait du bien !

Image cliquable pour voir l'exemple

Site web

[Créé / modifié] [04-01-2022 / 04-01-2022]

Caractéristiques

• CSS pur
• Système basique
• Cet exemple utilise l'élément 'summary' dans 'details', comme dans le cas d'école ci-dessous ;
  System Requirements

  Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended.

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [24-02-2021 / 24-02-2021]

Caractéristiques

• CSS, Normalize.css
• Normalize.css pas vraiment utile
• Pas de rollover
• Modale parfaitement centrée
• Fondu quant à l'affichage du fond opacifiant
• Autriche

Image cliquable pour voir l'exemple

Site web

Site de l'auteur

[Créé / modifié] [13-04-2022 / 13-04-2022]

Caractéristiques

• CSS absolument pur
• Pas de rollover
• Modale scrollable avec effet de fondu
• Bruxelle, Belgique

Image cliquable pour voir l'exemple

Site web

Site de l'auteur

[Créé / modifié] [03-02-2022 / 03-02-2022]

Caractéristiques

• CSS absolument pur
• Système basique mais efficace
• 2 cas d'école : Fermer ou pas avec un clic sur 'close'

Image cliquable pour voir l'exemple

Site web

[Créé / modifié] [02-08-2021 / 02-08-2021]

Caractéristiques

• CSS, Normalize.css
• Système pas responsive au départ mais avec deux petites lignes de CCS on peut ajuster
• Remplacer la largeur de la classe '.modal-content' par 70vw (au lieu de 400px)
• Ajouter pour cette même classe une Media queries '@media (max-width: 570px) { width: 100vw; }'
• Voir le code lié à l'image ci-dessous
• Beau rendu

Image cliquable pour voir l'exemple

Site web

[Créé / modifié] [02-05-2022 / 02-05-2022]

Caractéristiques

• CSS pur
• Système sans aucune dépendance
• Fermeture par clic sur le bouton 'close' obligatoirement
• C'est simple, ça aussi !

Image cliquable pour voir l'exemple

Site web

[Créé / modifié] [04-01-2022 / 04-01-2022]

Caractéristiques

• CSS, Bootstrap.css
• Le bouton est fixe, au milieu de la page
• Très peu de code
• Portsmouth, Angleterre

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [12-01-2022 / 12-01-2022]

Caractéristiques

• CSS, Normalize.css
• La fenêtre arrive du bas et se centre
• Le fond est opacifié 'sombre'
• Novo Hamburgo, Porto Alegre, Rio Grande do Sul, Brésil

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [14-08-2022 / 14-08-2022]

Caractéristiques

• CSS pur, aucune dépendance
• Apport d'informations essentielles
• La bouton est fixe, au milieu droit de la page
• Affichage des informations ligne par ligne, en douceur, j'aime beaucoup (à l'image de son site personnel)
• Salzbourg, Autriche

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [08-11-2021 / 08-11-2021]

Caractéristiques

• CSS, Normalize
• Système basique, pas d'image
• Fermer avec un clic sur 'close'

Image cliquable pour voir l'exemple

[Créé / modifié] [06-09-2020 / 13-03-2021]

Caractéristiques

• CSS pur
• S'ouvre et recouvre entièrement la fenêtre
• Retour obligatoire par la croix

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [11-10-2021 / 11-10-2021]

Caractéristiques

• CSS pur
• Très facile à mettre en oeuvre
• Deux exemples seulement mais c'est très clair et responsive même avec la vidéo

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [12-03-2021 / 12-03-2021]

Caractéristiques

• Fermer avec un clic sur 'close'
• Très belle exécution avec de superbes transitions et un beau design
• Un coup de coeur

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [09-12-2020 / 12-03-2021]

Caractéristiques

• CSS pur
• Système sans aucune dépendance
• Fermeture par clic sur la croix ou en dehors de le modale
• Les flêches de slide cachent le texte dans certains cas ! Elles sont mieux en bas de fenêtre !

Image cliquable pour voir l'exemple

Site web

[Créé / modifié] [04-01-2022 / 04-01-2022]

Caractéristiques

• CSS, JS, jQuery
• Rollover sur les boutons
• Au fur et à mesure que la fenêtre modale se met en place le fond devient de plus en plus flou
• Dublin, Irlande

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [11-02-2022 / 11-02-2022]

Caractéristiques

• CSS pur
• RollOver sur le bouton,au clic explosition de cercles concentriques pour arriver à un carré au milieu d'un halo lumineux
• Philadelphie, Pennsylvanie, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [13-11-2021 / 13-11-2021]

Caractéristiques

• CSS pur
• Système basique
• Code facile à lire

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [24-02-2021 / 24-02-2021]

Caractéristiques

• CSS pur
• RollOver sur les boutons de la modale, pas sur le bouton qui la lance
• Fermer obligatoirement avec un clic sur la croix
• Jolie présentation
• Arabie Saoudite

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [13-04-2022 / 13-04-2022]

Caractéristiques

• Belle transition d'affichage avec un mouvement circulaire
• Fermer obligatoirement avec un clic sur la croix

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [06-10-2020 / 16-10-2020]

Caractéristiques

• CSS, JS, jQuery
• L'auteur a découvert comment exploiter uniquement l'ID unique de la vidéo YouTube et le transmettre à un composant modal réutilisable qui tire parti de la méthode d'intégration de YouTube.
• Ouverture par un clic sur un bouton, une image, une bannière animée

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [21-08-2021 / 21-08-2021]

Caractéristiques

• CSS, jQuery, Bootstrap
• Utilise jQuery et Bootstrap dans la version 4.3
• Affichage par glissement par le haut

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [13-11-2020 / 13-11-2020]

Caractéristiques

• CSS, Normalize, JS, jQuery, TweenMax.js
• Fenêtre glissante par le haut après clic sur le bouton
• Puis glissante à nouveau vers le bas après clic sur le bouton valider

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [02-08-2021 / 02-08-2021]

Caractéristiques

• CSS, JS, jQuery, Bootstrap 4.6.3
• Très intéressant du fait du nombre de cas traités
• Balneario Camboriu, SC, Brésil

Image cliquable pour voir les exemples

Références

Site web

[Créé / modifié] [02-11-2021 / 02-11-2021]

Caractéristiques

• CSS, JS, rien d'autre
• Rollover sur l'image SVG
• La fenêtre s'ouvre en recouvrant totalement la page
• La fenêtre se referme comme elle s'est ouverte

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [11-02-2022 / 11-02-2022]

Caractéristiques

• CSS, JS, jQuery, Bootstrap 4
• La fenêtre s'ouvre et tout le reste de la page est ombré
• Certainement très utile

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [11-02-2022 / 11-02-2022]

Caractéristiques

• CSS, Normalize, JS, TweenMax.js
• La fenêtre s'ouvre d'abord, le texte apparait ensuite, avec transition douce
• La fenêtre se referme comme elle s'est ouverte
• Très original

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [02-11-2021 / 02-11-2021]

Caractéristiques

• CSS, JS, jQuery
• La modale s'affiche plein centre d'un seul coup
• Elle se ferme de la même façon
• La modale est fort bien intégrée à la page
• Édimbourg, Écosse

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [21-01-2022 / 21-01-2022]

Caractéristiques

• CSS, JS, jQuery, Modernizr.js, Velocity.js
• Le bouton se transforme en fenêtre, celle-ci occupant tut l'écran
• La croix pour sortir reste fixe
• Après avoir cliqué sur la croix, la fenêtre sedevient le bouton de départ.
• Le bas de l'ascenseur droit est en léger dégradé
• Superbe !

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [19-10-2021 / 19-10-2021]

Caractéristiques

• CSS, JS
• 20 affichages de modale à l'aide de transitions et d'animations CSS
• Que demander d'autre ?

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [02-05-2022 / 02-05-2022]

Caractéristiques

• CSS, JS, jQuery, Prefixfree.js
• Exemple pour la première animation : Une barre horizontale se dessine au milieu de l'écran puis s'ouvre pour le remplir et créer un fond transparent. Ensuite la fenêtre modale s'ouvre par le centre
• Exemples très aboutis

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [19-10-2021 / 19-10-2021]

Caractéristiques

• CSS, JS, jQuery
• Visuellement le bouton se transforme en modale
• Une fois la fenêtre ouverte la modale translucide est déplaçable
• Retour non prévu
• Bel exercice

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [17-05-2022 / 17-05-2022]

Caractéristiques

• CSS, jQuery
• Fenêtre avec en-tête et menu à gauche à base d'icônes
• Ouverture par un clic sur un bouton, avec transition
• Fermer avec un clic sur 'close' ou en dehors de la fenêtre
• D'autres exemples sur la page CodePen

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [06-09-2020 / 13-03-2021]

Caractéristiques

• CSS, Normalize.css, JS
• La fenêtre arrive par la gauche dans un joli mouvement ondulant
• Elle repart de la même façon
• Pas vraiment responsive
• Bend, Oregon, USA

Image cliquable pour voir l'exemple

Références

Site web

Lien sur Github

Site de l'auteur

[Créé / modifié] [02-11-2021 / 02-11-2021]

Caractéristiques

• CSS, Normalize.css, JS
• Fenêtre de login qui s'ouvre en pleine page
• Ouverture par un clic sur un bouton
• Transitions d'expansion pleine page pour la fenêtre de login, pleine fenêtre pour l'image
• Fermer avec un clic sur la croix avec mouvements inverses

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [12-01-2021 / 13-03-2021]

Caractéristiques

• CSS, JS
• Un bouton, situé en bas à droite; permet d'accéder à une petite fenêtre de contact qui arrive en glissant de la droite
• Sur celle-ci les icônes sociaux, le mail, et... ce que vous voulez y mettre
• Rollover doux sur les icônes
• Bien fichu
• Autriche

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [17-05-2022 / 17-05-2022]

Caractéristiques

• CSS, Normalize.css, JS, jQuery
• Transformation d'un bouton en simili modale
• Les deux boutons fonctionnent sur le même principe
• Ottawa, Canada

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [21-11-2021 / 21-11-2021]

Caractéristiques

• CSS, Normalize.css
• 3 boutons sur une même page page
• Une fenêtre est de grande dimension et génère un ascenseur droit sur desktop
• Canada

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [12-01-2022 / 12-01-2022]

Caractéristiques

• CSS, Normalize.css, JS, Dialog-polyfill.js
• La fenêtre s'ouvre en haut de page et propose un choix.
• La réponse est récupérée dans la fenêtre appelante: J'aime; Je n'aime pas; Annuler
• Utile
• Atlanta, Géorgie, USA

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [14-04-2022 / 14-04-2022]

Caractéristiques

• CSS, Normalize.css, JS, jQuery
• Fenêtre qui s'ouvre en pleine page en dessous d'une certaine largeur d'écran
• Ouverture par un clic sur un bouton
• Transitions d'expansion différentes selon la largeur d'écran
• Fermeture en dehors de la fenêtre ou par la croix

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [21-08-2021 / 21-08-2021]

Caractéristiques

• CSS, JS
• Modale centrée
• Transition qui fait que la fenêtre semble arriver du bas
• Fermer avec un clic sur la croix ou sur le bouton 'close'
• Malaisie

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [17-05-2022 / 17-05-2022]

Caractéristiques

• CSS, jQuery
• Fenêtre de login
• Ouverture par un clic sur un bouton, avec transition
• Fermer avec un clic sur la croix
• Plein d'autres exemples sur le site de l'auteur

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [06-09-2020 / 13-03-2021]

Caractéristiques

• CSS, JS
• Ce qui est intéressant dans ce tuto ce sont les normes à respecter pour faire un bon travail
• Références au site w3.org

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [12-01-2021 / 12-01-2021]

Caractéristiques

• CSS, jQuery
• Aucune image, poids léger
• Fermer avec un clic ou la touche ESC

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [06-09-2020 / 13-09-2021]

Caractéristiques

• CSS, Normalize.css, jQuery
• Facile à mettre en oeuvre
• La modale ne se réduit pas quand on diminue la largeur de la fenêtre

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [12-03-2021 / 12-03-2021]

Caractéristiques

• CSS, JS, jQuery
• Très bien fait, s'ouvre comme un livre
• Belles transitions

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [07-04-2021 / 07-04-2021]

Caractéristiques

• CSS, JS, jQuery
• 7 animations : Déplier; Révéler; Dévoiler; Blow Up; Meep Meep; Esquisse; Bond
• Très intéressant
• Philadelphie, Pennsylvanie, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [08-11-2021 / 08-11-2021]

Caractéristiques

• CSS, JS, jQuery
• Rollover sur le bouton et la croix
• La modale affiche une vidéo Youtube.. qui se visionne.
• Philadelphia, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [03-02-2022 / 03-02-2022]

Caractéristiques

• CSS, JS
• Une modale d'alerte toute simple d'une part
• Un enchaînement de deux modales d'autre part
• Dans ce deuxième cas la seconde modale a trois particularités: Sortie obligatoire par la croix; Croix déportée hors de la fenêtre proprement dite; Elle prend tout l'écran
• Salvador, Bahia, Brésil

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [22-02-2022 / 22-02-2022]

Caractéristiques

• CSS, JS
• Le bouton se transforme en entête de la modale
• La modale s'affiche dans un mouvement circulaire
• Original

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [21-01-2022 / 21-01-2022]

Caractéristiques

• CSS, Normalize.css, JS, jQuery
• La modale s'affiche plein centre dans un mouvement qui va de l'extérieur vers l'intérieur de la page
• Elle se ferme dans une cinématique exactement inverse
• Le contenu et la croix font l'objet d'une transition douce
• Jolie proposition
• Salt Lake City, Utah, USA

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [21-01-2022 / 21-01-2022]

Caractéristiques

• CSS, JS, Modernizr.js, Bootstrap
• Une fenêtre mère génère une fenêtre enfant
• Génial !

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [23-11-2020 / 23-11-2020]

Caractéristiques

• CSS, jQuery, Vue.js
• Fenêtre avec slider intégré
• Ouverture par un clic sur un bouton
• Fermer avec un clic sur la dernière fenêtre

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [06-09-2020 / 02-05-2022]

Caractéristiques

• CSS, JS, Vue.js
• Réaction du bouton au clic
• Réaction de la fenêtre à l'affichage
• Flip pour passer à la fenêtre suivante
• Effets inverses à la fermeture
• Beau travail
• Denver, Colorado, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [08-11-2021 / 08-11-2021]

Caractéristiques

• CSS, JS, jQuery, Velocity.js, Bootstrap
• Beaucoup de dépendances
• Quasiment la même fenêtre qui s'ouvre tout le temps? Ça nous permet de bien voir toutes les animations possibles
• L'intérêt aurait été augmenté avec une ouverture dynamique de la modale
• Berkeley, Californie, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [22-02-2022 / 22-02-2022]

Caractéristiques

• Le bouton se transforme en modale par explosion
• Au "cancel" la fenêtre redevient bouton
• CSS, JS, jQuery, Material.js
• Original

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [04-02-2021 / 04-02-2021]

Caractéristiques

• CSS, JS, jQuery
• Apparition de la fenêtre et du texte légèrement désynchronisée
• Fermeture par la croix avec une autre transition, fort belle également
• New Jersey, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [21-11-2021 / 21-11-2021]

Caractéristiques

• La fenêtre s'ouvre du point blanc à droite du bouton, vers l'extérieur
• CSS, JS, React.js, React-Dom.js
• Rollover sur le bouton et la croix
• Il faut cliquer sur la croix pour fermer
• Oakland, Californie, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [03-02-2022 / 03-02-2022]

Caractéristiques

• CSS, JS
• Une boîte de dialogue modale contient deux boutons qui ouvrent d'autres boîtes de dialogue
• Sur petits écrans la boîte de dialogue remplit la totalité de l'écran
• L'arrière plan est complètement masqué
• Le focus et les descriptions accessibles sont définis en fonction de chaque contenu
• Toutes les 'issues' sont gérées

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [22-02-2022 / 22-02-2022]

Caractéristiques

• La fenêtre s'ouvre du centre vers l'extérieur
• CSS, Normalize.css, JS, Prefixfree.js, jQuery
• Rollover sur tous les boutons et la croix

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [23-01-2021 / 23-01-2021]

Caractéristiques

• CSS, Normalize.css, JS, jQuery, Velocity.js, Bootstrap
• 30+ Bootstrap Modal Animation Effects
• Démonstration par l'exemple : extra !

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [23-11-2020 / 23-11-2020]