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 24 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
- 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]

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]

     

    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

    - 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, 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]

    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]

    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

    - 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]

    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]

    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

    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]

    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 / 13-03-2021]

    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]

    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]