Voile gris avec affichage d'un swf lors de clique

Bonjour,

Voila j'ai une vidéo flash que je voudrais afficher à la suite d'un clique sur un lien hypertexte sur une page.
Je voudrais faire apparaitre un div de couleur unie avec opacité à 50% pour faire un effet de "voile", qui désactive la page à l'arrière plan .
Sur le site de adobe il y a ce div, mais je n'arrive pas à isoler le bout de code qui gère cela : http://www.adobe.com/products/coldfusion/demos/ .

Comment recréer cet effet ?

Merci beaucoup :)

Bien le bonjour, il existe plusieurs solutions pour résoudre ce problème:

CSS pure (sans image):

Code HTML :

.MyBackDiv{
  position:absolute;
  top: 0px;
  left:0px;
  width:100%;
  height:100%;
  background-color: rgb(0, 0, 0); 
  z-index: 1000; 
  opacity: 0.65; /* pour firefox */
  filter:alpha(opacity=65); /* pour ce brave IE */
  display:none;
}

CSS pure (mais avec image)

Code HTML :

.MyBackDiv{
  position:absolute;
  top: 0px;
  left:0px;
  width:100%;
  height:100%;
  z-index: 1000; 
  background-image:url("myGreyPict.png");
  display:none;
}

il suffit de créer une image myGreyPict avec une opacité de 65 (avec Paint.net ou autre) et le tour est joué.

Attention toutefois au z-Index de la vidéo à ajouter (il doit impérativement être supérieur à 1000 sinon, il sera dessous)...

et enfin, une div:
<div class="MyBackDiv" id="myBackDiv"></div>

il ne faut pas oublier de passer le display à block lors du clique sur le lien exemple:

Code Javascript :

function showMyVideo(){
  document.getElementById("myBackDiv").style.display="block";
}

et la, il y a tout pour que ça marche.

[o-_-o]

Merci beaucoup pour cette réponse !

Je vais tester cela tout de suite!

c'est tout à fait ce que je voulais faire, merci beaucoup

oups petit soucis: le div s'affiche mais prend 100% de la fenêtre du navigateur mais sans scroller, pas de la taille réele de la page html affichée donc..

exemple: ici

y a t-il moyen de corriger cela?

Y a un petit soucis sur le lien que tu as fourni... il me renvois au texte de mon précédent message...


[o-_-o]

oui c'est normale, j'ai mis un texte un peu long sur ma page en exemple et j'ai repris ton post ^^
Scroll en bas, j'yai mis un bouton pour afficher le div

Bon, on mettra ça sur le compte de la fatigue, mais je crains hélas de ne pouvoir avancé plus, mes compétences en css sont très limitées... mais c'est dans ce sens qu'il va falloir creuser...


[o-_-o]

pas de problème, le réultat est presque là, merci beaucoup :)