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

Question

我有这样的javascript文件：

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();
    });
});

但是如果我点击“X Close”链接，覆盖就会关闭。如果我单击透明的页面（在内容之外），我希望覆盖也关闭。我该怎么办？请寻求帮助和建议。谢谢你。

Answer 1

当您将叠加层附加到正文时，附加一个单击事件侦听器：

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

单击此 div 时，将触发“x close”单击处理程序；