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

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(){
    ...
});
于 2013-10-15T10:57:56.413 に答える