Bonjour � toutes et tous,
alors voil� j'ai trouv� un code pour faire une sorte de popoup fa�on lightview seulement mon petit probl�me est que le code ne permet pas le scroll. Etant une vraie bille en JS j'aurait besoin de vos lumi�res.
Voici donc le code HTML:
Code html : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32 <!--le lien--> <a href="javascript:showDiv()">CGU</a> <!--END lien--> <!--POPUP--> <div id="hideshow" style="visibility: hidden;"> <div id="fade"></div> <div class="popup_block"> <div class="popup"> <a href="javascript:hideDiv()"><img src="icon_close.png" class="cntrl" title="Close"></a> <h3>Exemple d'une Popup CSS</h3> <p>Eu refero pertineo vulpes, molior, vel. Mos paulatim lobortis sed pneum antehabeo, tristique damnum dolor venio mauris, decet sudo, ibidem lucidus. </p> <p>Eu refero pertineo vulpes, molior, vel. Mos paulatim lobortis sed pneum antehabeo, tristique damnum dolor venio mauris, decet sudo, ibidem lucidus. </p> <h3>Exemple d'une Popup CSS</h3> <p>Eu refero pertineo vulpes, molior, vel. Mos paulatim lobortis sed pneum antehabeo, tristique damnum dolor venio mauris, decet sudo, ibidem lucidus. </p> <p>Eu refero pertineo vulpes, molior, vel. Mos paulatim lobortis sed pneum antehabeo, tristique damnum dolor venio mauris, decet sudo, ibidem lucidus. </p> </div> </div> </div> <!--END POPUP-->
maintenant le code JS :
et enfin le CSS car au d�part aucun "height" n'est d�fini mais �a change rien m�me avec un height...
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
16
17
18
19
20
21
22
23
24
25
26
27
28
29 <script language="javascript" type="text/javascript"> function hideDiv() { if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById('hideshow').style.visibility = 'hidden'; } else { if (document.layers) { // Netscape 4 document.hideshow.visibility = 'hidden'; } else { // IE 4 document.all.hideshow.style.visibility = 'hidden'; } } } function showDiv() { if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById('hideshow').style.visibility = 'visible'; } else { if (document.layers) { // Netscape 4 document.hideshow.visibility = 'visible'; } else { // IE 4 document.all.hideshow.style.visibility = 'visible'; } } } </script>
Code css : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89 img { border: none; } #hideshow { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } #fade { background: #000; position: fixed; width: 100%; height: 100%; filter:alpha(opacity=80); opacity: .80; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /*--IE 8 Transparency--*/ left: 0; z-index: 10; } .popup_block { background: #ddd; padding: 10px 20px; border: 10px solid #fff; float: left; width: 480px; position: fixed; top: 20%; left: 50%; margin: 0 0 0 -250px; z-index: 100; } .popup_block .popup { float: left; width: 100%; background: #fff; margin: 10px 0; padding: 10px 0; border: 1px solid #bbb; overflow:auto; } .popup h3 { margin: 0 0 20px; padding: 5px 10px; border-bottom: 1px solid #bbb; font-size: 1.5em; font-weight: normal; } .popup p { padding: 5px 10px; margin: 5px 0; } .popup img.cntrl { position: absolute; right: -20px; top: -20px; } /*-- Faire IE6 gérer le positionnement fixe --*/ *html #fade { position: absolute; top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop); } *html .popup_block { position: absolute; top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +((documentElement.clientHeight-this.clientHeight)/2) : document.body.scrollTop +((document.body.clientHeight-this.clientHeight)/2)); left:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollLeft + (document.body.clientWidth /2 ) : document.body.scrollLeft + (document.body.offsetWidth /2 )); } /*--IE 6 PNG Fix--*/ img{ behavior: url(iepngfix.htc) }
voil� merci d'avance pour votre aide
EDIT: d�sol� mais j'ai trouv� la solution avec un overflow:auto dans le css l� ou il y a la class .popup_block .popup.
pardon pour le d�rrangement. Je laisse le code on sait jamais si �a interesse quelqu'un![]()
Partager