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 24 02 2021

Modal window - Plugin
1. BootBoxJs par Payne NickBibliothèque (JS, jQuery, Bootstrap)
2. FeatherLightJS par Boss NoelBibliothèque (JS, jQuery, Bootstrap)
3. Md BootstrapBouton (Site Bootstrap de référence)
4. SweetAlert2Plugin (Javascript)
5. Tingle.js par Parisi RobinPlugin (Javascript)

Modal window - CSS pur
1. Css ScriptBouton
2. Long TimothyBouton
3. Nawara PeteBouton
4. PrakashBouton
5. Uslu ErdemBouton

Modal window - Avec du Javascript
1. BbBootstrapBouton (jQuery, Bootstrap)
2. Chalker BryanBouton (JS, jQuery)
3. Cukuren MertBouton (JS)
4. IziModal - Dolza MarceloBouton (JS, jQuery)
5. Joli Code - Levaillant JonathanBouton (JS)
6. jQueryModal - Kyle FoxBouton (JS, jQuery)
7. Singh KabirBouton (jQuery, Bootstrap)
8. Smith JaseBouton (JS, jQuery, Vue.js)
9. Smith MichaelBouton (JS, jQuery)
10. Stillhart PatrickBouton (JS, jQuery)
11. Ward JoshuaBouton (JS)
12. Winn JoshBouton (JS, jQuery, Bootstrap)
13. Wisnu STBouton (jQuery, Bootstrap)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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é.