Question

我正在尝试在点击显示上创建一个jquery并隐藏弹出窗口。

我设法创建了点击和显示，但是当点击黑暗的bg时需要能够使弹出窗口关闭。

请参见Js Fiddle此处

$('#some-button').on('click', function () { 
    $('#overlay, #overlay-back').fadeIn(500); 
});

Answer 1

只需在叠加点击

上创建一个Fadeout

$('#some-button').on('click', function () { 
    $('#overlay, #overlay-back').fadeIn(500); 
});
// Fadeout
$('#overlay').on('click', function () { 
    $('#overlay, #overlay-back').fadeOut(200); 
});

Answer 2

$('#some-button').on('click', function () {         
    $('#overlay, #overlay-back').fadeIn(500); 
    $("#overlay").on("click", function(){
      $("#overlay").off("click");
      $(".callme").off("click");
      $("#overlay, #overlay-back").fadeOut(500);  
    });
    $(".callme").on("click", function(e){
       e.stopPropagation();
    });
});

Answer 3

将此添加到您的javascript：

 $("#overlay").on('click',function(){
     $('#overlay, #overlay-back').fadeOut(500); 
 });

Answer 4

您可以使用：

$('#overlay').on('click', function () { 
    $('#overlay, #overlay-back').fadeOut(500); 
});

$('.callme').on('click', function (e) { 
    e.stopPropagation();
});

<强> Fiddle Demo

Answer 5

基本上，您向叠加层添加了一个点击处理程序，并检查以确保未单击.callme div，然后隐藏叠加层。

$('#overlay').click(function(e){console.log(e);
    if ($(e.target).is(':not(.callme)')){
        $('#overlay, #overlay-back').fadeOut(500); 
    }
});

http://jsfiddle.net/EtHbf/300/

Jquery点击显示并隐藏

5 个答案: