Bonjour,
Voici mon code simplifié:
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
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 body{ color:black; border:1px solid transparent; font: 15px Calibri,Arial,sans-serif; margin: 0; } .overlay{ background:black; opacity:0.8; position:fixed; top:0px; bottom:0px; left:0px; right:0px; z-index:100; cursor:pointer; } .box{ position:fixed; top:-2000px; left:25%; right:25%; background-color:#fff; /*color:#7F7F7F;*/ padding:20px; border:2px solid #ccc; -moz-border-radius: 20px; -webkit-border-radius:20px; -khtml-border-radius:20px; -moz-box-shadow: 0 1px 5px #333; -webkit-box-shadow: 0 1px 5px #333; z-index:1000; width:500px; margin-left: auto; margin-right: auto; } a.boxclose{ float:right; width:26px; height:26px; margin-top:-30px; margin-right:-30px; cursor:pointer; } .box h1{ border-bottom: 1px dashed #7F7F7F; margin:-20px -20px 0px -20px; padding:10px; background-color:#57C8E7; color:black; -moz-border-radius:20px 20px 0px 0px; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; -khtml-border-top-left-radius: 20px; -khtml-border-top-right-radius: 20px; } @media only screen and (max-width: 1120px), (min-device-width: 768px) and (max-device-width: 1024px) { .box{ width:80%; left:0; right:0; } }
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 <div class="overlay" id="overlay" style="display:none;"></div> <div class="box" id="box"> <a class="boxclose" id="boxclose"></a> <h1 id="overlay_title">Test developpez.com</h1> <p id="overlay_content"> Venerint discedunt firmare summos nostri valido fruticeta periculose tamen inter volvente plantis persequendos persequendos clivos volvente acies ad hoste prensando venerint rupium consternuntur lapsantibus explicare etiam pedites aliquotiens hoste nullas fortiter superati et vertices ultima ad vertices fruticeta per discedunt gressus: necessitate per ad clivos venerint dimicante fruticeta invia vel ruinis venerint periculose arta per valido lapsantibus ad summos vertices ponderum nullas hoste per ponderum valido ad eos inmanium nullas sublimes et arta inmanium vertices necessitate abscisa et discursatore pedites fruticeta si et nullas aliquotiens vertices volvente inmanium consternuntur lapsantibus et nisu persequendos ultima discedunt persequendos necessitate consternuntur abscisa nisu. </p> </div> <button class="open">OPEN</button>
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11 $(function() { $('#boxclose,#overlay').click(function(){ $('#box').animate({'top':'-2000px'},500,function(){ $('#overlay').fadeOut('fast'); }); }); }); $( ".open" ).click(function() { $('#overlay').fadeIn('fast',function(){ $('#box').animate({'top':'10px'},500);}); });
Tout se passe bien mais quand le contenu de la box est trop important ou l'écran trop petit, impossible de scroller pour voir la fin de la box. C'est le body qui scroll et non la box.
Si vous avez une solution ?
Merci de votre aide !
A+
Coincoin22
Partager