Question

我有这个影子盒，而我正在尝试做的就是当我点击叠加层时让它逐渐消失，但是现在它只有在我点击实际图像本身时才有效。我已经在代码中尽我所能但仍然没有骰子，代码如下：

$(document).ready(function(){

    $('a.shadowbox').click(function(e) {
    $('body').css('overflow-y', 'hidden'); 
    $('<div id="overlay"></div>') 
        .css('top', $(document).scrollTop())
        .css('opacity', '0') 
        .animate({'opacity': '0.9'}, 'slow')
    .appendTo('body');

    $('<div id="shadowbox"></div>')
        .hide()
    .appendTo('body');

    $('<img>')
        .attr('src', $(this).attr('href'))
        .load(function() {
            var top = ($(window).height() - $('#shadowbox').height()) / 2; 
            var left = ($(window).width() - $('#shadowbox').width()) / 2;
            $('#shadowbox') 
            .css({ 
                'top': top + $(document).scrollTop(),
                'left': left
                })
            .fadeIn();
    })
    .click(function() {
        $('#overlay, #shadowbox')
            .fadeOut('slow', function(){ 
                $(this).remove(); 
            $('body').css('overflow-y', 'auto');
            });
        })
    .appendTo('#shadowbox');
    return false;
    });
});

Answer 1

click事件目前是$('img')链的一部分（即attr，load，click，appendTo）。

而是尝试将点击事件添加到叠加层：

$('#overlay').click(...)

阴影框叠加点击后退

1 个答案: