Créer une fenêtre modale avec CSS 3
Par Didier Mouronval
Le 2012-11-27 14:43:42, par Bovino, Rédacteur
Je vous propose un article permettant de créer une fenêtre modale uniquement en CSS 3 : Créer une fenêtre modale avec CSS 3.
Jusqu'à présent, seul JavaScript permettait de réaliser ce type de fenêtre, mais CSS 3 apporte des fonctionnalités suffisantes pour gérer cela correctement.
Bien entendu, n'hésitez pas à faire part de vos remarques et commentaires voire des suggestions d'amélioration ou d'autres méthodes.
-
rodolphebrdExpert confirméBravo!! Très bon article, très accessible et toujours aussi pédagogue.
Je suis toujours impressionné par la capacité de faire passer un message clairement et simplement.
Les étapes sont très claires et j'ai pris du plaisir à lire les parties que je maitrise (c'est toujours bon de réviser les bases).
L'esprit de ce forum est agréable et jusqu'à présent je n'ai eu que des satisfactions.le 07/12/2012 à 10:21 -
FirePrawnExpert éminent séniorSuper articlele 27/11/2012 à 14:45
-
jimmypageMembre confirméclair, concis, .. Merci pour cet article !le 05/12/2012 à 15:49
-
mykikiNouveau Candidat au ClubJ'ai trouvé cet article très bien donc je l'ai mis en application.
mais lors des essais, petit problème:
dans mon fichier j'ai 3 fenêtres popup en javascript
j'ai donc remplacé le code en mettant en place les fenêtres modales.
Mais quand j'ai cliqué sur le 1er lien -> résultat ok
quand j'ai cliqué sur le 2éme -> affichage du 1er lien
idem pour le 3éme lien.
j'ai pris l'exemple de l'article, j'ai doublés les routines avec target et button et j'ai changé le texte entre les balises <p></p> pour identifier les positions "target 1" "target 2" idem avec "bouton 1" "bouton2"
quand j'ai cliqué sur le 1er lien target, il m"affiche bien target 1 mais quand je clique sur le 2éme lien target, il m'affiche encore target 1 alors qu'il devrait m'afficher target 2.
idem avec les commandes bouton.
conclusion, il semblerait que l'on ne peut utiliser cette routine qu'une fois par fichier.
une fois le lien target et une fois le lien buttonCode html : 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119<!doctype html> <html> <head> <meta charset="utf-8" /> <title>Modalbox CSS</title> <style> h1{ text-align: center; } #modalCheck{ display: none; } .modalLayer{ display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.5); } #modalCheck:checked + .modalLayer, #modalContent:target{ display: block; } .popup_block{ background: #fff; padding: 20px; border: 20px solid #ddd; position: relative; margin: 10% auto; width: 40%; box-shadow: 0px 0px 20px #000; border-radius: 10px; } img.btn_close { float: right; margin: -55px -55px 0 0; cursor: pointer; } .button{ cursor: pointer; color: blue; text-decoration: underline; } </style> </head> <body> <h1>Une Modalbox CSS</h1> <h2>Méthode <kbd>:target 1</kbd></h2> <p>Cliquer sur le lien ci-dessous pour voir apparaitre la fenêtre modale #1</p> <div> <a href="#modalContent">Voir la fenêtre modale</a> <div class="modalLayer" id="modalContent"> <div class="popup_block"> <a href="#noWhere"><img alt="Fermer" title="Fermer la fenêtre" class="btn_close" src="03-ressources/close_pop.png"></a> <img style="float: right; margin: 0 0 0 20px;" alt="Lil bomb dude" src="./bomber.gif"> <h2>Popup #1</h2> <p>Fenêtre modale 1. </p> <p>avec un target.</p> </div> </div> </div> <h2>Méthode <kbd>:target 2</kbd></h2> <p>Cliquer sur le lien ci-dessous pour voir apparaitre la fenêtre modale #1</p> <div> <a href="#modalContent">Voir la fenêtre modale</a> <div class="modalLayer" id="modalContent"> <div class="popup_block"> <a href="#noWhere"><img alt="Fermer" title="Fermer la fenêtre" class="btn_close" src="03-ressources/close_pop.png"></a> <img style="float: right; margin: 0 0 0 20px;" alt="Lil bomb dude" src="./bomber.gif"> <h2>Popup #1</h2> <p>Fenêtre modale 2. </p> <p>avec un target.</p> </div> </div> </div> <h2>Méthode <kbd>:checked 1</kbd></h2> <p>Cliquer sur le lien ci-dessous pour voir apparaitre la fenêtre modale #2</p> <div> <label class="button" for="modalCheck">Voir la fenêtre modale</label> <input type="checkbox" id="modalCheck" /> <div class="modalLayer"> <div class="popup_block"> <label for="modalCheck"><img alt="Fermer" title="Fermer la fenêtre" class="btn_close" src="03-ressources/close_pop.png"></label> <img style="float: right; margin: 0 0 0 20px;" alt="Lil bomb dude" src="./bomber.gif"> <h2>Popup #2</h2> <p>Fenêtre modale 1. </p> <p>avec un bouton.</p> </div> </div> </div> <h2>Méthode <kbd>:checked 2</kbd></h2> <p>Cliquer sur le lien ci-dessous pour voir apparaitre la fenêtre modale #2</p> <div> <label class="button" for="modalCheck">Voir la fenêtre modale</label> <input type="checkbox" id="modalCheck" /> <div class="modalLayer"> <div class="popup_block"> <label for="modalCheck"><img alt="Fermer" title="Fermer la fenêtre" class="btn_close" src="03-ressources/close_pop.png"></label> <img style="float: right; margin: 0 0 0 20px;" alt="Lil bomb dude" src="./bomber.gif"> <h2>Popup #2</h2> <p>Fenêtre modale 2. </p> <p>avec un bouton.</p> </div> </div> </div> </body> </html>
le 06/12/2012 à 23:04 -
BovinoRédacteurUn id doit être unique dans la page !
Regarde bien les différents codes de l'article, les id sont incrémentés à chaque nouvel exemple.le 07/12/2012 à 7:43 -
mickingCandidat au ClubBonjour ,
Je souhaite déjà dire que ce code est super ,mais j'ai un petit problème de placement et je pense que c'est due as un Éléments styleavez vous une idée de ce que je doit mettre en œuvre pour solutionné le problème en vous remerciant cordialement
Perché Michaelle 24/02/2018 à 15:49 -
mickingCandidat au ClubJe doit apprendre a mieux lire j'ai résolue mon souci est devinée c'était mes ID qui était mal renseigné .le 24/02/2018 à 16:25