0

我在 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'); });
    });

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

4

1 回答 1

1

首先，您的#overlay 添加不正确。

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

或者

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

您的叠加点击事件应该是这样的：

$(document).on('click.removePopup', '#overlay', function(){
    ...
});
于 2013-10-15T10:57:56.413 回答