Modal closing when pop up is clicked

Question

I'm making a simple jQuery pop up modal. I know I should just use a plugin but I want to at least understand the mechanics of how it works before using a plugin so im creating my own.

here is the html:

<div id="box">
<div id="modal">
<a href="#" class="close"><div>close</div></a>
    <div class="wrapper">
        <h1 style="text-align:center">Title Here</h1>
        <p style="text-align:center">Do what ever you want here crete a form add an image gallery etc.</p>
    </div>

</div>
</div>



<div id="wrapper">
    <h1>This is a Very Simple/Lightweight jQuery Modal Pop Up!</h1>
    <a href="#" class="reveal">Click Me!</a>
</div><!-- END WRAPPER -->

the css:

#modal{
background-color: #fff;
width: 500px;
height: 300px;
z-index: 50;
position:absolute;
border-radius: 8px;
}

and now the jQuery:

$(document).ready(function(){
// hide the modal on page load
$('#box').hide();

//show modal when the link is clicked
$('.reveal').click(function(e){
    e.preventDefault();

    pageWidth  = $(window).width();
    pageHeight = $(document).height();
    modalLeft = Math.max(pageWidth - $('#modal').outerWidth(),  0) / 2;
    modalTop  = Math.max($(window).height() - $('#modal').outerHeight(),  0) /   2;

    $('#box').fadeIn("slow").css({
        "background-color": "rgba(0,0,0,0.8)",
        "width"           : pageWidth,
        "height"          : pageHeight,
        "z-index"         : "10",
        'position'        :'absolute',
        'top'             :'0',
        'left'            :'0'
    });
    $('#modal').fadeIn("slow").css({
        'top'             : modalTop + $(window).scrollTop(), 
        'left'            : modalLeft + $(window).scrollLeft()
    });
});

// close modal
$('.close').click(function(){
    $('#box').fadeOut("slow");
});
$('#box').click(function(){
    $(this).fadeOut("slow");
});


});

here is a jsfiddle so it can be seen in action: http://jsfiddle.net/dNj4b/

The problem that I am having is that I want the pop up to close only when the overlay is clicked;howver, it closes even when just the pop up box is clicked

Answer 1

Well, in the jsFiddle you posted you have this:

$('#box').click(function(){
    $(this).fadeOut("slow");
});

Remove it.

The thing is, your wrapper/outer div that is being used as overlay is #box

 $('#box').fadeIn("slow").css({
        "background-color": "rgba(0,0,0,0.8)",
        "width"           : pageWidth,
        "height"          : pageHeight,
        "z-index"         : "10",
        'position'        :'absolute',
        'top'             :'0',
        'left'            :'0'
    });

and you have a click event handler attached to it firing a fadeout.

EDIT:

To be able to close it just with the overlay use this:

    $('#box').click(function(e){
        if (e.target.id != 'box'){return false;}
        $(this).fadeOut("slow");
    });

Demo here

Answer 2

http://jsfiddle.net/dNj4b/17/

Change HTML to:

<div id="box"></div>
<div id="modal">
    <a href="#" class="close"><div>close</div></a>
    <div class="wrapper">
        <h1 style="text-align:center">Title Here</h1>
        <p style="text-align:center">Do what ever you want here crete a form add an image gallery etc.</p>
    </div>
</div>

Add this to css:

#modal{
    background-color: #fff;
    width: 500px;
    height: 300px;
    z-index: 50;
    position:absolute;
    border-radius: 8px;
    display:none;****
}

Add this to jquery:

// close modal
    $('.close').click(function(){
        $('#box').fadeOut("slow");
        ***$('#modal').fadeOut("slow");
    });
    $('#box').click(function(){
        $(this).fadeOut("slow");
        ***$('#modal').fadeOut("slow");
    });

Answer 3

You need to move your overlay from being the wrapper for the modal to just a placeholder tag. It should not be parent of the modal. Click event on the modal will propagate to the click event of the overlay and it evetually closes. Try this way:

Move box out

<div id="box"></div>
<div id="modal">    <a href="#" class="close"><div>close</div></a>

    <div class="wrapper">
            <h1 style="text-align:center">Title Here</h1>

        <p style="text-align:center">Do what ever you want here crete a form add an image gallery etc.</p>
    </div>
</div>

Demo

and add these:

   $('#box, #modal').hide();

    // close modal
    $('.close').click(function () {
        $('#box, #modal').fadeOut("slow");
    });
    $('#box').click(function () {
        $(this).add('#modal').fadeOut("slow");
    });