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关闭”链接，叠加层就会关闭。如果我点击透明的页面（在内容之外），我希望覆盖也关闭。我怎么能这样做？请求帮助和建议。谢谢。

Answer 1

将叠加层附加到正文时，请附加单击事件侦听器：

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

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

如何通过单击页面关闭叠加层

1 个答案: