Scroll sur une modal/overlay

Bonjour,

Voici mon code simplifié:

Code:

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:

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:

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