Lightbox close on click / FadeIn Behaviour

Question

I'm having some problems with very simple Lightbox behaviour. I need to modify this script to allow users to click on the overlay to close the form and also having problems with it only sitting in the div and not overlaying the whole screen.

http://jsfiddle.net/techrevolt/jkJ7E/

I also want it to fade in when clicked. I have looked on the net but makes no sense to me - I am new to JS and Jquery so any pointers would be great.

CSS:

.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:888888;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
float:left;
}
.white_content {
display: none;
position: absolute;
top: 0%;
left: 25%;
width: 50%;
height: 100%;
padding: 16px;
border: none;
background-color: white;
z-index:999999;
overflow: auto;
float:left;
}
.textright{float: right;}

JS:

 $(".showpop").click(function(){
$("#light").show();
$("#fade").show();
});
$(".hidepop").click(function(){
$("#light").hide();
$("#fade").hide();
});

HTML:

 <a href ="javascript:void(0)" class="showpop"> <input type="submit" class="button" value="Arrange to see a demo" /></a>

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

<a href ="javascript:void(0)" class="hidepop textright" style="text-decoration:none;">X</a>

<br />
<br />

            <form method="post" action="#">
                                <div class="row half">
                                    <div class="6u"><input type="text" name="name" placeholder="Name" /></div>
                                    <div class="6u"><input type="text" name="email" placeholder="Email" /></div>
                                </div>
                                <div class="row half">
                                    <div class="12u"><textarea name="message" placeholder="Message" rows="6"></textarea></div>
                                </div>
                                <div class="row">
                                    <div class="12u">
                                        <ul class="actions">
                                            <li><input type="submit" class="button" value="Send Message" /></li>
                                        </ul>
                                    </div>
                                </div>
                            </form>


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

Answer 1

Just extending the rest of the answers a bit Use fadeIn() and fadeOut() inthis way to achieve the kind of effect you want both for 'close button' and for clicking on overlay

Check the FIDDLE

$(".showpop").click(function(){
   $("#light").fadeIn();
   $("#fade").fadeIn();
});
$(".hidepop").click(function(){
   $("#light").fadeOut();
   $("#fade").fadeOut();
});

$(".black_overlay").click(function() { $(this).fadeOut(); $("#light").fadeOut(); });

Answer 2

Use fadeOut and fadeIn. See the attached jsfiddle:

http://jsfiddle.net/R8ULU/

$(".showpop").click(function(){
    $("#light").fadeIn();
    $("#fade").fadeIn();
});
$(".hidepop").click(function(){
    $("#light").fadeOut();
    $("#fade").fadeOut();
});

Answer 3

Add this

$(".black_overlay").click(function() { $(this).hide(); $("#light").hide(); });

This will let you to close on click of overlay.

Answer 4

Add these lines at end

$('#fade').click(function(){
    $(this).hide();
    $("#light").hide();
});

updated fiddle