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 23 solutions au

 

Fenêtre modale - Plugin

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]

FeatherLightJS par Boss Noel - Plugin

- Plugin, facile à personnaliser et à comprendre

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]

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 / 24-01-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 / 25-01-2021]

Tingle.js par Parisi Robin - Plugin

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 / 25-01-2021]

     

    Modal window en CSS pur

    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]

    Long Timothy

    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 / 06-09-2020]

    Nawara Pete

    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 / 09-12-2020]

    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]

    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

    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]

    Chalke rBryan

    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 / 06-09-2020]

    Cukuren Mert

    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 / 12-01-2021]

    IziModal - Dolza Marelo

    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 / 06-09-2020]

    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 / 06-09-2020]

    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]

    jSmith 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 / 06-09-2020]

    jSmith Michael

    Caractéristiques

    • CSS, jQuery
    • Ouverture par un clic sur un bouton
    • Fermer obligatoirement avec un clic sur la croix ou sur le bouton continuer
    • Le graphisme manque de décicatesse mais l'affichage de la fenêtre ets original

    ouverture d'une fenêtre modale par clic sur un bouton

    Site web

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

    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

    Modal window qui s'ouvre par transformation du bouton

    Références

    Site web

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

    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]

    Winn Josh

    Caractéristiques

    • Lecture de vidéos Youtube dans une modale avec Bootstrap 3.3.4
    • La fenêtre s'ouvre en glissant par le haut
    • CSS, JS, jQuery

    Image cliquable pour voir l'exemple

    Modal window qui ouvre en lecture une video Youtube

    Références

    Site web

    [Créé / modifié] [04-02-2021 / 04-02-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]