fond opaque

20 juil. 2007, 18:02

Bonjour,

Je me suis baladé sur le net et j'ai trouvé un truc sympa mais je ne sais pas le faire:

http://www.boursier.com/vals/FR/air-fra ... 244050.htm

cliquez sur le textarea svp.

J'ai commencé mon code, j'arrive a afficher un div comme eux, cependant, ma page parente n'est jamais opaque(ps: j'arrive a changer la couleur de la page parente).

Avez vous une idée?

merci

20 juil. 2007, 18:46

L'astuce, c'est qu'entre la page et le bloc, il y a un div qui couvre toute la page avec un pixel en semi-transparence qui le remplit : ensuite, on joue avec le z-index en CSS pour avoir la page en fond, le div opacifié en intermédiaire et le bloc en avant-plan. Mais il te faudra aussi un peu de JavaScript pour récupérer les dimensions de la page de façon à avoir le div intermédiaire de la même taille.

21 juil. 2007, 13:26

Merci,

Oui je savais deja tout ça, mais je n'arrive pas a avoir de pisel semi transparent...
Faut il le créer via photoshop ou alors il existe un fonction css?

merci, je vais regardfer cela sur google...

21 juil. 2007, 13:46

CSS ne fait pas de génération de graphiques : crée l'image avec un logiciel genre PhotoShop, GIMP ou Paint Shop Pro.

21 juil. 2007, 19:36

AH ok,
Merci pour toutes ces indications...
Alors je me suis lancé dans le code et j'ai un souci

Voici mon code:

Code : Tout sélectionner


<html>
<script>
function member_displayBoxForum() {
			var g = document.getElementById("hide-me");
			var h = document.getElementById("react_nonlong");
			g.style.backgroundColor = "lightyellow";
			h.style.display = "block";
			g.style.display = "block";
}


</script>
<body  >
<style>
div#hide-me	{
	display:none;
	z-index: 1000;
	position:fixed;
	width:100%;
	height:100%;
	filter:
	progid:DXImageTransform.Microsoft.Alpha(opacity=40);
	-moz-opacity: 0.4;
	opacity: 0.4;
	left:0;
	top:0;
}

</style>
<div id="un">

<div id="hide-me">
</div>
<div style="position:relative;z-index:3000;">
	<div id="react_nonlong" style="display:none;z-index:3000;left:10px;position:absolute;width:480px;background-color:white;border:2px solid black;">
	
	<!-- ce qui apparait -->			
		
	
	</div>
	</div>
	
	<form name="forumPost" method="post" action="" style="margin-bottom:10px;">
		
		<!-- un formulaire , quand on clique sur un bouton, on actionne la fonction javascript du haut.-->

	</form>
	
</div>
</body></html>

J'ai bien mis 3 div, mais le hide me ne prend pas toute la page, avez vous une idée s il vou splait.
ps, en mettant le </div> de hide-me tout en bas, je n'ai rien du tout a cause du display:none...

merci

21 juil. 2007, 21:55

Refais ton code comme suit, car il est mal codé :

Code : Tout sélectionner

<html>
<head>
<script type="text/javascript">
</script>
<style type="text/css">
</style>
</head>
<body>
...

De plus, la propriété propriétaire -moz-opacity est superflue : Firefox 2 implémente la propriété CSS 3 opacity.

fond opaque

Qui est en ligne