Question

I have a modal-like window in CSS that I fade in with JavaScript. The HTML is like this:

<div class="whiteout">
<div class="modal">
    <a class="modal-close" title="Close"></a>
    // modal window content
</div>
</div>

And the CSS is like this:

.whiteout {
    display: none;
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    background-color: #fff; 
    background-color: rgba(255, 255, 255, 0.7);
}
.modal {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 200;
    border: 12px solid #666;
    border: 12px solid rgba(0, 0, 0, 0.5);
    -moz-border-radius: 12px;
    border-radius: 12px;
}

I’m using jQuery to show the modal window when I click a link, with the "whiteout" background, and I want it to fade out when I click the background.

$('.share-link').click( function() {
    $('.whiteout').fadeIn();
    return false;
} );
$('.whiteout').click( function() { // click the background
    $(this).fadeOut();
} );
$('.modal-close').click( function() { // close button on the modal window
    $('.whiteout').fadeOut();
} );

However, it fades out whenever I click the modal window, as well as the background, because technically that is inside the "whiteout" element. Is it possible to stop that happening when I click inside the .modal element?

Answer 1

try this:

$('.whiteout').click( function(e) { // click the background
    if(e.target == this)
       $(this).fadeOut();
} );