Discussion :

[Domi2]

Bonjour,

J'essaye de créer un popup, en suivant notamment un tutoriel de Bovino, Créer une fenêtre modale avec CSS 3 et d'autres trouvés sur Internet.

Dans le popup, je désire n'afficher qu'une image, et pour rendre le code générique, que la taille de ma div s'adapte automatiquement à la largeur de l'image affichée.

Cela fonctionne bien si je fixe une largeur, ma fenêtre modale est bien affichée au centre de l'écran.

Pour adapter la largeur, j'ai bien trouvé des discussions indiquant de modifier la propriété "display".

Cela me donne bien le résultat attendu en terme de largeur, par contre le popup vient s'afficher en haut à gauche de l'écran.

Code css :

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

1
2
3
4
5
6
7
8
9
10
.modalDialog > div {
    /*max-width: 500px;*/
    display : inline;
    position: relative;
    margin: 10% auto;
    background: #fff; /*FFFFF*/
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}

J'ai fait quelques essais, mais sans succès.

Est-il possible de conserver les deux comportement, soit que la div s'adapte au contenu et qu'elle s'affiche bien en position "relative" ?

Merci d'avance pour votre aide.

[Invité]

Bonjour,

Ajouter :

Code css :

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

1
2
3
4
5
6
7
8
.modalLayer {
   text-align:center;
}
.popup_block {
   display: inline-block;
   /* width:40%; */ /* à remplacer par : */
   max-width:40%;
}

[Domi2]

Bonjour,

J'ai donc ajouter les deux classes :

Code html :

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

<div id="openModal" class="modalDialog" class="modalLayer" class="popup_block">

Code css :

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
 
.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}
 
.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}
 
.modalDialog > div {
position: relative;
margin: 10% auto;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
}
 
.modalLayer {
   text-align:center;
}
 
.popup_block {
   display: inline-block;
   /* width:40%; */ /* à remplacer par : */
   max-width:40%;
}

C'est déjà mieux, dans la mesure où le popup s'ouvre à la bonne hauteur.

Par contre, la div prend toute la largeur de l'écran.

Aurais-je manqué quelques chose ?

[Invité]

LOL...
3 attributs class* sur la même balise**...

Il faut repartir de l'exemple de Bovino.

Méthode :target

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
	<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="./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>Aliquip transverbero loquor esse ille vulputate exerci veniam fatua eros similis illum valde. Praesent, venio conventio rusticus antehabeo lenis. Melior pertineo feugait, praesent hos rusticus et haero facilisis abluo. </p>
				<p>Veniam tincidunt augue abluo vero, augue nisl melior quidem secundum nobis singularis eum eum.</p>
 
			</div>
		</div>
	</div>

Code :

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
		#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;
		}

Et modifier le CSS avec ce que j'ai mis dans mon message précédent

* Qui a parlé d'ajouter les classes au HTML ??

** Pour info : on peut appliquer plusieurs classes à une balise en les séparant par un espace dans le même attribut class :

Code :

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

<div class="classe1 classe2 classe3">

Mais ce n'est ni le cas, ni le sujet ici.

[Domi2]

Bonsoir,

J'essaie de comprendre (et je fais des tests).

Si je reprend ce code :

Code css :

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

1
2
3
4
5
.popup_block {
   display: inline-block;
   /* width:40%; */ /* à remplacer par : */
   max-width:40%;
}

Cela signifie que ma div va s'étendre systématiquement sur 40% de la largeur du "conteneur", en l'occurrence l'écran ?

C'est bien cela ?

C'est en tout cas ce que je constate.

[Invité]

Bonjour,

1/ Et si tu montrais TON code à toi ?

2/ "max-width" : tu comprends un peu l'anglais, ou tu as besoin d'une traduction ?

3/ Sinon, le mieux est quand même que tu apprennes les bases du CSS, non ?

• Les meilleurs cours et tutoriels CSS
• Glossaire des propriétés CSS

[Domi2]

2/ "max-width" : tu comprends un peu l'anglais, ou tu as besoin d'une traduction ?

Un minimum, je dois bien l'admettre

Mais de ton côté, je ne sais pas pas si tu comprends le français !

Dans le popup, je désire n'afficher qu'une image, et pour rendre le code générique, que la taille de ma div s'adapte automatiquement à la largeur de l'image affichée.

[Invité]

Tu as toutes les cartes en main.

[Domi2]

Bonjour,

Bon, ça fonctionne, mis à part l'ombre portée qui refuse de s'afficher, mais ce sera un autre sujet.

Code html :

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

1
2
3
4
5
6
7
8
Mon popup <a href="#openModal">HTML5 / CSS3</a> 
 
<div id="openModal" class="modalDialog">
	<div>
		<a href="#close" title="Fermer" class="close"><b>x</b></a>
		<img class="attribuer_logement" src="/outils/wiki1/download/attachments/253886551/attribuer_logement.png"/>
    </div>
</div>

Code css :

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
.modalDialog {
    display : none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
 
.modalDialog:target {
    opacity: 1;
    pointer-events: auto;
    display: block;
    text-align: center;
}
 
.modalDialog > div {
    display: inline-block;
    position: relative;
    margin: 10% auto;
    background: #fff;
    padding: 10px 10px 10px 10px;
    box-shadow: 10px 10px 10px #000;    
}
 
a.close:link {color: #FFFFFF;}
a.close:link {text-decoration:none; }
a.close:visited {color: #FFFFFF;}
a.close:hover {color: #000000;}
 
.close {
    background: #606061;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px  #000;
}
 
.close:hover {background: #FFFFFF;}

Merci.