Discussion :

[thebarbarius]

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

[Vil'Coyote]

jquery lightbox et tu appel via un onload dans ton body

[thebarbarius]

Alors j'ai fais sa.

Code :

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

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 ?

[Bovino]

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

[thebarbarius]

Code :

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

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.

[Vil'Coyote]

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
 
<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 ?