Une lighbox au chargement de la page.

Bonjour,

J'aimerai que quelqu'un m'aide a faire une lightbox en css/html qui s'ouvre au chargement de la page.

Je rajouterai des display:none après dynamiquement.

Merci

jquery lightbox et tu appel via un onload dans ton body

Alors j'ai fais sa.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

<div style="position:fixed; background:black; width:100%; height:100%; left:0px; bottom:0px; opacity:0.7; z-index:999"> <div align="center" style="background-color:#FFF; margin-top:10%; margin-left:auto; margin-right:auto; width:400px; height:400px; z-index:9999; color:#000"> <h1>TItre principal</h1><br /> test test test test<br /><br />   test test test test<br /><br />   test test test test<br /><br />   test test test test</div> </div></div>

---

Le probleme c'est que c'est transparent et on voit pas bien ce qu'il y a ecrit.

Comment remedier a sa ?

Il faut mettre le contenu en dehors de la div opaque...

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

<div style="position:fixed; background:black; width:100%; height:100%; left:0px; bottom:0px; opacity:0.7; z-index:999"></div>   <div align="center" style="background-color:#FFF; margin-top:10%; margin-left:auto; margin-right:auto; width:400px; height:400px; z-index:9999; color:#000"> <h1>TItre principal</h1><br /> test test test test<br /><br />   test test test test<br /><br />   test test test test<br /><br />   test test test test </div>

---

Le problème c'est que le contenu s'affiche en bas de la page.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<div style="position:fixed; background:black; width:100%; height:100%; left:0px; bottom:0px; opacity:0.7; z-index:999">   <div align="center" style="background-color:#FFF; margin-top:10%; margin-left:auto; margin-right:auto; width:400px; height:400px; z-index:9999; color:#000"> <h1>TItre principal</h1><br /> test test test test<br /><br />   test test test test<br /><br />   test test test test<br /><br />   test test test test </div>   </div>

---

ça te donne quoi ça ?

Merci encore.

Mais c'est censé changé quoi ?
Car je ne vois aucune différence avec mon code.

la différence réside l'encapsulation du contenu. tu as mis <div></div> <div>toncontenu</div>

alors que moi <div> <div>ton contenu</div></div>


dans ton code tu affiche le fond et après seulement le contenu au lieu d'afficher le contenu dans le cadre