如何通过单击页面来关闭覆盖

Question

I've javascript file like this :

var $overlay_wrapper;
var $overlay_panel;

function show_overlay() {
    if ( !$overlay_wrapper ) append_overlay();
    $overlay_wrapper.fadeIn(700);
    $overlay_panel.fadeIn(700);
}

function hide_overlay() {
    $overlay_wrapper.fadeOut(500);
    $overlay_panel.fadeOut(500);
}

function append_overlay() {
    $overlay_wrapper = $('<div id="overlay"></div>').appendTo( $('BODY') );
    $overlay_panel = $('<div id="overlay-panel"></div>').appendTo( $('BODY') );

    $overlay_panel.html( 
    '<p>This is the overlay content</p><a href="#" class="hide-overlay">X Close</a>' 
     );

    attach_overlay_events();
}

function attach_overlay_events() {
    $('A.hide-overlay', $overlay_panel).click( function(ev) {
        ev.preventDefault();
        hide_overlay();
    });
}

$(function() {
    $('A.show-overlay').click( function(ev) {
        ev.preventDefault();
        show_overlay();
    });
});

but the overlay just closed if I click the "X Close" link . I want an overlay also closed if I click in the page that's transparant(outside the content). how can I do about that? please for help and suggest. thank you.

Answer 1

When you append the overlay to the body, attach a click event listener:

$('#overlay').click(function(){
   $('.hide-overlay').trigger('click');
});

When this div is clicked it will trigger the "x close" click handler;