CODEWITHSUNDEEP
jquerycsspopup
GluePear
GluePear

Reputation: 7725

Overlay not closing popup when clicked on

I have a pop-up in jQuery which, when triggered, adds an overlay to the DOM before showing the pop-up:

$('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;
    });

This works fine, an overlay is appended, which fades out the background, and the basket pop-up is displayed. Overlay CSS:

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

My problem is that I want the user to be able to close the pop-up by clicking anyway else on the screen. I have this code:

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

But it's not working. Any ideas why this might be? Thanks in advance.

Upvotes: 0

Views: 880

Answers (1)

pushOk
pushOk

Reputation: 290

First of all your #overlay adding is not correct.

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

or

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

And your overlay click event should be something like this:

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

Upvotes: 1

Related Questions