Modal window ou fenêtre modale

Présentation

Pour interroger, informer vos visiteurs de manière certaine.

Une fenêtre modale est une fenêtre qui va s'ouvrir "par dessus" la fenêtre en cours

Dans un premier temps les services de 'plugin', dans un deuxième temps ceux en 'CSS pur', dans un troisième temps ceux avec du Javascript et/ou Bootstrap.

En mode mobile vous avez accès à chaque catégorie par un insert au milieu droit de l'écran

Je vous propose 75 solutions au

 

Fenêtre modale - Plugin

Animated Modal

- Plugin jQuery qui permet de créer une modale plein écran avec des transitions CSS3

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

plugin Javascript pour fenetre modale avec jQuery

Références

Site web

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

BootBoxJs par Payne Nick

- Je n'ai pas trouvé ce plugin très intuitif à utiliser. C'est sans doute parce que je me sers pas de Bootstrap habituellement

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

Bibliothèque Jvascript à télécharger gratuitement

Références

Site web

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

Bulma - jBox

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

framework open source qui propose la creation de Modal window

Références

Site web

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

FeatherLightJS par Boss Noel - Plugin

- Plugin, facile à personnaliser et à comprendre
- L'iFrame à 500px fait déborder en mode mobile, il suffit de diminuer cette taille !

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

Bibliothèque Javascript avec du CSS et Bootstrap

Références

Site web

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

Hub Spot - Vex

- Léger sans dépendances externes
- Remplace 'alert', 'confirm' et 'prompt'

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

Bibliothèque Javascript simple et legere

Références

Site web

Site de l'auteur

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

Humaan

- Exemple retenu : Très beau slider à l'intérieur d'une modale

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

Bibliothèque Javascript simple et legere

Références

Site web

Site de l'auteur

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

jQueryScript.net - Zebra_Dialog

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

plugin sur base jQuery pour fenetre modale

Références

Site web

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

MDB (Material Design for Bootstrap) - Plugin

- Site web Boostrap

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

bibliotheque pour modal window

Références

Site web

Site de l'auteur

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

Reinl Hans Christian alias Drublic

Caractéristiques

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

Image cliquable pour voir l'exemple

plugin en css pur pour fenetre modale

Références

Site web

Site de l'auteur

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

SweetAlert2 - Plugin

- Plutot intuitif, fonctionne bien avec Bootstrap 4.3.1

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

bibliotheque Javascript pour modal window

Références

Site web

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

Tingle.js par Parisi Robin - Plugin

- Excellent !

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

    Exemples de modal window en pur Javascript via l'utilisation d'un plugin

    Références

    Site web

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

    Wagner Stephan - jBox

    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

    bibliotheque gratuite pour Modal window

    Références

    Site web

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

     

    Modal window en CSS pur

    Albaugh Jake

    - Exemple moins simple que celui qui suit

    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

    fenetre modale en css pur avec l'attribut target

    Références

    Site web

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

    Believe My

    - Exemple très basique qui permet de bien comprendre le fonctionnement d'une modale

    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

    fenetre modale en css pur avec l'attribut target

    Références

    Site web

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

    Bracco Chris

    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

    fenetre modale responsive en css

    Références

    Site web

    Site de l'auteur

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

    Brynjulfsen Havard - Bergen, Norvège

    Caractéristiques

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

    Image cliquable pour voir l'exemple

    Modal window en CSS pure

    Site web

    Site de l'auteur

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

    Burnell Chris

    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

    Modal window en CSS pure

    Site web

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

    Css Script

    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

    Modal window en pur CSS

    Références

    Site web

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

    Denic Marko

    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

    Modale centree avec fondu d'affichage du fond

    Site web

    Site de l'auteur

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

    Drago Web

    Caractéristiques

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

    Image cliquable pour voir l'exemple

    Modale defilable avec effet de fondu

    Site web

    Site de l'auteur

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

    Eiche Paul

    - Pour l'objet ".modal-window > div", remplacer "width:400px" par "min-width:240px" (par exemple) pour que la fenêtre ne déborde pas sur mobile

    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

    Modal window en pur CSS

    Site web

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

    Ekrof

    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

    Modal window en CSS avec normalize

    Site web

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

    Fray Stephen

    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

    Modal window en CSS pure

    Site web

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

    Gill Alex

    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

    fenetre modale en ccs seulement

    Références

    Site web

    Site de l'auteur

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

    Linhart Lisi

    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

    fenetre modale cote droit de la page

    Références

    Site web

    Site de l'auteur

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

    Long Timothy

    - Un peu de simplicité, ça fait du bien !

    Caractéristiques

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

    Image cliquable pour voir l'exemple

    Modal window par Long Timothy en pur CSS

    Site web

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

    Melnikov Stas - Penza, Russie

    - Belle transition !

    Caractéristiques

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

    Image cliquable pour voir l'exemple

    ouverture d'une fenetre modale avec une belle transition

    Références

    Site web

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

    Modal Css par Laxe.me

    - Nickel !

    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

    Laxe.me propose une fenetre modale completement responsive

    Références

    Site web

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

    Nawara Pete

    - Aucune dépendance

    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

    Tres belle modale window en pur CSS

    Références

    Site web

    Site de l'auteur

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

    Orendain Marvin - Avec slider

    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

    Modal window en CSS pure

    Site web

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

    Oliveira Elizabet

    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

    popup centre

    Références

    Site web

    Site de l'auteur

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

    Perez Rivera Nick (2)

    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

    popup centre

    Références

    Site web

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

    Prakash

    Caractéristiques

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

    Image cliquable pour voir l'exemple

    Modal window en pur CSS

    Références

    Site web

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

    Saeed Abubaker

    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

    Modal window en pur CSS avec une jolie presentation

    Références

    Site web

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

    Uslu Erdem

    Caractéristiques

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

    Image cliquable pour voir l'exemple

    Modal window en pur CSS avec une transition d'affichage très élégante

    Références

    Site web

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

     

    Modal window avec du Javascript et/ou Boostrap

    Amyo tMatt

    - Utile

    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

    fenetre modale responsive pour video Youtube

    Références

    Site web

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

    BbBootstrap

    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

    template gratuit de fenêtre modale avec Bootstrap et jQuery

    Références

    Site web

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

    Bebber Lucas

    - Exemple très cohérent

    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

    fenêtre modale avec transitions

    Références

    Site web

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

    Bicudo Christopher - ModalX

    - 11 propositions

    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

    11 fenêtre modale avec transitions

    Références

    Site web

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

    BiekDavid - Modale vidéo

    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

    fenêtre modale s'ouvrant sur une video

    Références

    Site web

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

    BiekDavid (2) - With time out

    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

    modale avec time out

    Références

    Site web

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

    Bowen Blake - Animation de type 'pliante'

    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

    fenêtre modale s'ouvrant en mode pliage

    Références

    Site web

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

    Bryson Shell

    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

    Modal window sans transition

    Références

    Site web

    Site de l'auteur

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

    Cody House - Naples, Italie

    - Très bel exemple

    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

    fenetre modale avec tres belles transitions

    Références

    Site web

    Site de l'auteur

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

    Coldarif

    - Nécessite absolument: 'stopExecutionOnTimeout - 1b93190375 e9ccc259df3 a57c1abc0 e64599724 ae30d7 ea4c6877 eb615f89387.js'

    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

    fenêtre modale avec transitions et animations

    Références

    Site web

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

    Couch Jesse

    - Exemples très originaux. Extra !

    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

    fenêtre modale avec transitions

    Références

    Site web

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

    Couch Jesse (2)

    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

    fenêtre modale translucide

    Références

    Site web

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

    Chalke rBryan

    - Présentation intéressante

    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

    fenêtre modale avec onglets lateraux

    Références

    Site web

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

    Coyier Chris

    - Fondateur de css-tricks.com
    - Co-fondateur de CodePen
    - A écrit 3 ouvrages dans le domaine informatique

    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

    fenêtre modale avec animation ondulante

    Références

    Site web

    Lien sur Github

    Site de l'auteur

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

    Cukuren Mert

    - Présentation agréable
    - Pour ouvrir la fenêtre vous avez deux moyens : Cliquer sur le bouton 'Login' ou défiler vers le bas

    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

    exemple de fenêtre de login ouverte grâce à une modal window

    Références

    Site web

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

    Denic Marko (2)

    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

    fenetre modale sur base de bouton extensible

    Références

    Site web

    Site de l'auteur

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

    Ettrics

    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

    fenetre modale sur base de bouton extensible

    Références

    Site web

    Site de l'auteur

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

    Ettrics (2)

    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

    3 fenetres modales generees sur une meme page

    Références

    Site web

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

    Grant Keith J.

    - Modale de dialogue

    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

    fenetre modale avec retour de reponse

    Références

    Site web

    Site de l'auteur

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

    Halpin Clinton

    - Excellente base

    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

    fenetre modale responsive

    Références

    Site web

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

    Iilhamriz

    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

    modal window de base

    Références

    Site web

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

    IziModal - Dolza Marelo

    - Pas bien compris l'intérêt de toutes ces images en base-64
    - #modal-custom avec "margin:10px;" est un peu plus joli en mode mobile

    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

    modal window de login et d'enregistrement

    Références

    Site web

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

    Joli Code

    TUTO : 1ère partie, les critères d’accessibilité + quelques exemples de ce qu’il ne faut pas faire. 2ème partie, implémentation et respect des critères d'accessibilité.

    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

    exemple de fenêtre de login ouverte grâce à une modal window

    Références

    Site web

    Site de l'auteur

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

    jQueryModal - Kyle Fox

    Caractéristiques

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

    Image cliquable pour voir l'exemple

    jQuery Modal par Kyle Fox

    Références

    Site web

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

    jQuery Plain Modal par Anseki

    - LES MODALES DEBORDENT

    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

    jQuery Modal avec exemples par Anseki

    Références

    Site web

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

    Nastasia

    - Hélas, pas responvive !

    Caractéristiques

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

    Image cliquable pour voir l'exemple

    jQuery Modal qui s'ouvre comme un livre

    Références

    Site web

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

    Perez Rivera Nick - 7 propositions

    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

    multiples propositions de fenetres modales

    Références

    Site web

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

    Peruso Anthony

    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

    Modal window affichant une video Youtube

    Références

    Site web

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

    Ribeiro Marcelo

    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

    Modal window d'alerte

    Références

    Site web

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

    Rosa alias RRoberts

    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

    Modal window s'affichant dans un mouvement circulaire

    Références

    Site web

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

    Shizuru Nainoa

    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

    Modal window avec transitions

    Références

    Site web

    Site de l'auteur

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

    Singh Kabir - Multiple Bootstrap Modals

    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

    double modal window

    Références

    Site web

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

    Smith Jase

    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

    exemple de fenêtre de login ouverte grâce à une modal window

    Références

    Site web

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

    Smith Jase (2) - Avec flip

    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

    fenetre modale avec retournement (flip)

    Références

    Site web

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

    Sozanski Mike

    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

    Toutes les animations pour ouvrir une fenetre modale

    Références

    Site web

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

    Stillhart Patrick

    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

    exemple de fenêtre de login ouverte grâce à une modal window

    Références

    Site web

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

    Tey Tag

    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

    fenetre modale avec transitions fifferentes a l'ouverture et a la fermeture

    Références

    Site web

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

    Vincent Matthew

    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

    Modale qui recouvre la page en partant du centre du point blanc, sur le bouton

    Références

    Site web

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

    W3.org - Dialog Modal

    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

    Modal window avec ouverture sur d'autres modales

    Références

    Site web

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

    Ward Joshua

    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

    Modal window qui recouvre la page en partant du centre

    Références

    Site web

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

    Wisnu ST - 30 Animations

    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

    animation d'une fenetre modale avec l'aide de Bootstrap

    Références

    Site web

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