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

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

1 个答案: