Fade lightbox in, and click on background and make it disappear

Question

Hi! I'm trying to make a lightbox, and I've got everything to work. You can click here to see it in live mode . What I want to do now, is to be able to click on the background and then the box will disappear. Also, when you click "Åpne Lysbildefremvisningen" the lightbox and background will fade nicely in, and when you click "close" og click on the background it will fade back out. I couldn't understand how to do that. Thank you!

Index.html

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

Style.css

.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.1;
opacity:.10;
filter: alpha(opacity=10);
}
.white_content {
    display: none;
    position: absolute;
    top: 30%;
    left: 30%;
    width: 640px;
    padding: 10px;
    background-color: #FFF;
    z-index:1002;
    overflow: auto;
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

Answer 1

You should listen to the click event of the div with the black_overlay class. And within it, change the style.display of the main div.

Have you ever used a client framework as jQuery ow extJS? They ease a lot this kind of work, and some plugins based on those framworks do all the work for you. Write all the code from scratch is a good option only when you are really interested in learn the javaScript foundamentals.