当灯箱出现时，javascript灯箱内的进度条会启动

Question

我创建了一个jquery进度条，并将其放在一个javascript灯箱中。问题是我只想在点击灯箱打开时才启动进度条。直到现在我的方式使得进度条在主页加载时启动。知道如何解决这个问题吗？这是我的代码：http://jsfiddle.net/D9NBY/

<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block' ">
OPEN</a>

<div id="light" class="white_content_stats">

<div class="prog">
    <div id="filler" class="filler"></div>
</div>


<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"> 
</br>CLOSE</a>

<div id="fade" class="black_overlay_stats"> </div>

我的jquery

<script>

var stepSize = 50;
setTimeout((function() {
var filler = document.getElementById("filler"),
percentage = 0;
return function progress() {
  filler.style.height = percentage + "%";
  percentage +=1;
  if (percentage <= 100) {
    setTimeout(progress, stepSize);
 }
}

}()), stepSize);

</script>

我的CSS

 .black_overlay_stats{
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 1000%;
        z-index:1001;
        -moz-opacity: 0.6;
        opacity:.70;
        filter: alpha(opacity=70);
    }
    .white_content_stats {
        display: none;
        position:fixed;
        top: 15%;
        width: 300px;

        padding: 30px;
        margin-left:10px;
        background-color:#F2F2F2;   

        border-radius: 0px;
        box-shadow: 0px 0px 0px 20px rgba(0,0,0,0.6);    
        z-index:1002; 
    }



.prog {
    height: 300px;
    width: 30px;
    border: 1px solid white;
    position: relative;
}
.filler {
    height: 0%;
    width: 30px;
    position: absolute;
    bottom: 0;
    background-color: grey;
}