Créer une ombre à l'arrière d'une popup

missmiss89 · 11/08/2011, 10h40

Bonjour à tous,
j'ai un bouton et lorsque je clique dessus, une popup s'ouvre. J'aimerais que ma popup soit un peu comme en avant de l'écran et qu'il y ait de l'ombre (transparente) à l'arrière pour qu'on puisse toujours voir ce qu'il y a dans la page derrière la popup.

Pour cela, j'ai imbriqué 2 DIV, dans le premier, j'affecte une couleur de fond et un effet transparent et dans le second, je définis ma popup.

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
<html> <head>
<title>Mon titre</title>
 
 
<style type="text/css">
 
#popExemple { 
     text-align: center;
     float:right;
     margin-left:350px;
     margin-top:200px; 
     display: none; 
     background-color: #f7f7ef; 
     position:absolute; 
     top: 10px; 
     left: 10px; 
     z-index: 10000; /* utile pour que votre fenêtre passe au dessus du reste */ 
} 
</style>
 
</head>
<body>
 <?php
 if ( isset ( $_GET['maVariable'] ) ) 
 { 
	$styleDiv = 'style="display:inline;"'; 
	$ombre = 'style="width:100%; 
	height:100%;
	background: #C0C0C0; 
        filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5; "'; 
}
 else 
 { 
	$styleDiv = ''; 
	$ombre = '';
  } 
 ?>
		<div id="global" style="position:relative;"> 
			<div <?php echo $ombre; ?>>
				<div id="popExemple" <?php echo $styleDiv; ?>> 
					<p>Un clic sur l'image pour refermer la fenêtre.</p> 
					<a title="refermer" href="test_popup.php?page=maPageSansLaVariable">
					<img alt="exemple" src="img/croix.png" /> </a> 
				</div> 
			</div>
			<div id="contenu" > 
				<p>blablablabla blabla blablabla blabla blabla</p>
				<p>blabla <a title="ouvrir" href="test_popup.php?maVariable=yes"> Ma super Popup</a> 
				blabla blabla</p>
			</div> 
		 </div> 
	 </body> 
 </html>

Ça ne marche pas, la couleur d'arrière-plan de mon 1er DIV ne s'affiche pas sur tout l'écran et l'effet de transparence est aussi appliqué à ma popup.

Comment dois-je faire?

Merci d'avance pour vos réponses.

Bisûnûrs · 11/08/2011, 11h05

Pour savoir pourquoi ça ne s'affiche pas sur toute la hauteur de l'écran, je te renvoie à la FAQ :
http://css.developpez.com/faq/index....ur_pourcentage

Pour l'opacité, les éléments enfants en héritent aussi, donc si tu ne veux pas que le 2e div soit aussi transparent, il faut le sortir du premier div.

missmiss89 · 08/09/2011, 15h19

Bonjour à tous,
Je n'arrive toujours pas à faire en sorte que l'ombre derrière la popup prenne tout l'écran, lorsque je scrolle vers le bas, la page descend mais l'ombre ne descend pas, elle s'arrête à un niveau.

Voici le code ma popup:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
#popup {
	width:500px;
	background-color:#FFFFFF; 
	visibility:hidden;
	display:inline;
	padding: 20px;
	border: 20px solid #ddd;
	float: left;
	font-size: 1.2em;
	position:absolute;
	top: 50%; left: 50%;
	z-index: 99999;
}

Voici le code de l'ombre:

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
 
#ombre {
filter: alpha(opacity=50); 
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5; 	 
position:absolute; 
height:100%;
width : 100%;
background-color:#E6E6FA;
background-repeat:repeat-y;
background-repeat:repeat-x;
z-index: 9999;
background-position: center ; 
}

Et j'ai 2 div comme ceci:

Code :

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

1
2
3
4
5
6
 
<div id="ombre"></div>
<div id="popup" ></div>
<script language="javascript">
	popupon('popup');
</script>

Et voici la fonction javascript popupon:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function popupon(idobjet)
{
	if (idobjet)
	{
		objet=document.getElementById(idobjet);
		var top=Math.floor(screen.height/3.8);
		var left=Math.floor((screen.width-objet.offsetWidth)/2);
		objet.style.top=top+"px";
		objet.style.left=left+"px";
		objet.style.visibility="visible";		
	}
}

Ça fait un moment que je cherche à résoudre ce problème mais je n'y arrive pas. Je vous prie de m'aider.
Merci d'avance.

anemone-clown · 09/09/2011, 13h15

As-tu essayé de changer l'attribut position de absolute en relative?

Candygirl · 09/09/2011, 15h09

Bonjour,

Quel est l'élément qui sert de référence à ton positionnement absolu ? La fenêtre de visualisation?

Un élément en absolut se positionne rapport à son plus proche ancêtre positionné, par défaut la fenêtre de visualisation.

Sans l'intégralité de ton code on ne peut que faire des spéculations... Un position:relative attribué au body pourrait bien régler ton problème.

Firelove · 14/11/2011, 21h29

Bonjour, alors je ne sais totalement pas comment créer mon pop-up ( Ou petite annonce ) qui apparaitrais et me dirais quand je viens de recevoir un message privé ou quand un membre de mon forum se connecte.

Pourrais-je avoir un texte Html/Css svp ? :/

09/09/2011, 15h09	#5
Candygirl Modératrice Inscription : juillet 2006 Messages : 1 529 Détails du profil Informations personnelles : Sexe : Âge : 40 Localisation : Suisse Informations forums : Inscription : juillet 2006 Messages : 1 529 Points : 1 869 Points : 1 869	Bonjour, Quel est l'élément qui sert de référence à ton positionnement absolu ? La fenêtre de visualisation? Un élément en absolut se positionne rapport à son plus proche ancêtre positionné, par défaut la fenêtre de visualisation. Sans l'intégralité de ton code on ne peut que faire des spéculations... Un position:relative attribué au body pourrait bien régler ton problème. __________________ Les bons réflexes: avant de poser une question: règles \| faq \| tutoriels \| recherche clarté, politesse, vocabulaire et orthographe soignés = efficacité remercier ceux qui ont pris le temps d'aider et si c'est le cas
	00

14/11/2011, 21h29	#6
Firelove Invité de passage Lycéen Inscription : novembre 2011 Messages : 1 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Lycéen Informations forums : Inscription : novembre 2011 Messages : 1 Points : 1 Points : 1	Créer un popup d'annonce de connection d'un membre/réception d'un message privé Bonjour, alors je ne sais totalement pas comment créer mon pop-up ( Ou petite annonce ) qui apparaitrais et me dirais quand je viens de recevoir un message privé ou quand un membre de mon forum se connecte. Pourrais-je avoir un texte Html/Css svp ? :/
	00

11/08/2011, 11h05	#2
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Pour savoir pourquoi ça ne s'affiche pas sur toute la hauteur de l'écran, je te renvoie à la FAQ : http://css.developpez.com/faq/index....ur_pourcentage Pour l'opacité, les éléments enfants en héritent aussi, donc si tu ne veux pas que le 2e div soit aussi transparent, il faut le sortir du premier div.
	00

09/09/2011, 13h15	#4
anemone-clown Nouveau Membre du Club Jef Ingénieur développement de composants Inscription : novembre 2007 Messages : 31 Détails du profil Informations personnelles : Nom : Jef Localisation : France, Meuse (Lorraine) Informations professionnelles : Activité : Ingénieur développement de composants Secteur : High Tech - Électronique et micro-électronique Informations forums : Inscription : novembre 2007 Messages : 31 Points : 29 Points : 29	As-tu essayé de changer l'attribut position de absolute en relative?
	01

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