jquery - 弹出窗口未正确处理

Question

我试图为我的项目制作一个弹出框，当我单击文档中的其他位置时它会关闭，但问题是当我单击弹出框 div 时它也会关闭。当我单击文档中不在 div 上的其他位置时，它应该关闭。

在这里摆弄

$(document).ready(function(){
    jQuery.fx.speeds = {
        fast: 120           
    };
    $("#popup-img").click(function (e) {
        if ($(".popup").is(":hidden")) {
        $(".checkbox input").removeAttr("checked");
    $(".popup").slideDown("fast");
        }
        else {
        $(".popup").slideUp("fast");
        }
    e.stopPropagation();
    });

    $("body").click(function(){
        $(".popup").slideUp("fast");
    });         
});

Answer 1

您需要测试点击是否发生在弹出窗口内

$("body").click(function (e) {
    if ($(e.target).closest('.popup').length == 0) {
        $(".popup").slideUp("fast");
    }
});

演示：小提琴

Answer 2

尝试这个

$(document).click(function(){
if (!$('.popup').is(e.target) && $('.popup').has(e.target).length === 0) {
      $(".popup").slideUp("fast");
 }

});

在这里摆弄

Answer 3

编辑

我的旧小提琴没有做空洞的工作，这是新的工作：

http://jsfiddle.net/cuYBD/11/

在小提琴中，我用 div#mybody 替换了 body。

将您的 body.click 功能更改为：

$("body").click(function(e){
    var bodyfound = false;
    $(e.target).parents().each(function() {
        if($(this).is(".popup")) {
            bodyfound=true;
           return;
    }
    });
    if(!bodyfound) {
        $(".popup").slideUp("fast");
    }
});

Answer 4

尝试改变：

$("body").click(function(){
  $(".popup").slideUp("fast");
});

对此：

$(document).click(function(){
  $(".popup").slideUp("fast");
});

$(".popup").click(function(e){
  e.stopPropagation();
});