jquery - 单击时覆盖不关闭弹出窗口

Question

我在 jQuery 中有一个弹出窗口，当它被触发时，会在显示弹出窗口之前向 DOM 添加一个覆盖层:

$('a.trigger').click(function(){
    var id = $(this).attr('id');
    $.ajax({
        type:'POST',
        url:'/add_to_basket',
        data:{'id':id},
        success:function(data){
            var overlay = $('<div id="overlay">');
            $('body').append(overlay);
            $('#basket').css({display:'block'}).animate({top:'20%',opacity:'1'},500);
            $('#basket_contents').append(data);     
            }
        });
        return false;
    });

这很好用，附加了一个叠加层，使背景淡出，并显示了篮子弹出窗口。叠加 CSS:

#overlay { 
   background:#FFFFFF;
   opacity: 0.5;
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1000;
}

我的问题是我希望用户能够通过点击屏幕上的其他地方来关闭弹出窗口。我有这段代码:

$('#overlay').on('click',function(){
    $('#overlay').remove();
    $('#basket').animate({top:'10%',opacity:'0'},350,function(){ $(this).css('display','none'); });
    });

但它不起作用。任何想法为什么会这样？提前致谢。

Answer 1

首先你的#overlay 添加不正确。

var overlay = $('<div/>', {id: 'overlay'});

或

var overlay = $('<div id="overlay"></div>');

你的覆盖点击事件应该是这样的:

$(document).on('click.removePopup', '#overlay', function(){
    ...
});