[Article] Créer une fenêtre modale avec CSS 3

Bovino · 27/11/2012, 14h43

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.

Créer une fenêtre modale avec CSS 3.

Bien entendu, n'hésitez pas à faire part de vos remarques et commentaires voire des suggestions d'amélioration ou d'autres méthodes.

FirePrawn · 27/11/2012, 14h45

Super article

jimmypage · 05/12/2012, 15h49

clair, concis, .. Merci pour cet article !

mykiki · 06/12/2012, 23h04

J'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 button

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Bovino · 07/12/2012, 07h43

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

rodolphebrd · 07/12/2012, 10h21

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.

07/12/2012, 07h43	#5
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 18 079 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 42 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 18 079 Points : 64 503 Points : 64 503	Un 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. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

27/11/2012, 14h43	#1
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 18 079 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 42 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 18 079 Points : 64 503 Points : 64 503	Créer une fenêtre modale avec CSS 3 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. Créer une fenêtre modale avec CSS 3. Bien entendu, n'hésitez pas à faire part de vos remarques et commentaires voire des suggestions d'amélioration ou d'autres méthodes. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	80

27/11/2012, 14h45	#2
FirePrawn Responsable (X)HTML/CSS Sébastien Germez Ingénieur réalisateur Inscription : mars 2011 Messages : 2 641 Détails du profil Informations personnelles : Nom : Sébastien Germez Âge : 25 Localisation : France, Haut Rhin (Alsace) Informations professionnelles : Activité : Ingénieur réalisateur Secteur : Industrie Informations forums : Inscription : mars 2011 Messages : 2 641 Points : 20 635 Points : 20 635	Super article __________________ Vous souhaitez participer à la rubrique (X)HTML/CSS, contactez-moi ! Avant toute chose : lire le mode d'emploi du forum et ses règles. Je ne réponds pas aux questions techniques en MP.
	00

05/12/2012, 15h49	#3
jimmypage Membre éprouvé Développeur informatique Inscription : novembre 2006 Messages : 299 Détails du profil Informations personnelles : Sexe : Âge : 29 Localisation : France Informations professionnelles : Activité : Développeur informatique Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : novembre 2006 Messages : 299 Points : 476 Points : 476	clair, concis, .. Merci pour cet article !
	00

07/12/2012, 10h21	#6
rodolphebrd Membre émérite Rodolphe Inscription : novembre 2012 Messages : 593 Détails du profil Informations personnelles : Nom : Rodolphe Localisation : France, Gironde (Aquitaine) Informations professionnelles : Secteur : Conseil Informations forums : Inscription : novembre 2012 Messages : 593 Points : 898 Points : 898	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.
	10

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email