Page 1 sur 1
fond opaque
Posté : 20 juil. 2007, 18:02
par johnnyWalker
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
Posté : 20 juil. 2007, 18:46
par Cyrano
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.
Posté : 21 juil. 2007, 13:26
par johnnyWalker
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...
Posté : 21 juil. 2007, 13:46
par Cyrano
CSS ne fait pas de génération de graphiques : crée l'image avec un logiciel genre PhotoShop, GIMP ou Paint Shop Pro.
Posté : 21 juil. 2007, 19:36
par johnnyWalker
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
Posté : 21 juil. 2007, 21:55
par Victor BRITO
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.
