如何通過單擊頁面來關閉覆蓋

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

將疊加層附加到主體時，請附加一個click事件監聽器：

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

單擊此div時，將觸發“ x close”點擊處理程序；