Question

我已经尝试了类似问题的答案而没有成功。

在这个jsfiddle中：http://jsfiddle.net/h2HzN/6/

我设置了当你按下逃脱时它会消失：

$(document).keyup(function(e) {
    if (e.keyCode == 27) {
        $("#signup").fadeOut(250);
        $("#window").slideUp(450);
    }
});

但是当我点击黑盒子时，我也希望它消失。提前谢谢。

Answer 1

试试这个：

$(document).keyup(function (e) {
    if (e.keyCode == 27) {
        removeMessage();
    }
}).click(function (e) {
    if ($(e.target).closest('#window').length == 0 || $(e.target).prop('id') != 'window') {
        removeMessage();
    }
});

function removeMessage() {
    $("#signup").fadeOut(250);
    $("#window").slideUp(450);
}

Example fiddle

请注意，检查最接近的#window元素意味着此代码适用于#window中的所有子元素。

Answer 2

这应该DEMO

$(window).click(function() {
  if(this.id !== "window") {
    $("#signup").fadeOut(250);
    $("#window").slideUp(450);
  }
});

$("#window").on("click", function(e){
   e.stopPropagation();
});

对于你提供的最新小提琴，

MODIFIED FIDDLE

最新解决方案，

$("#popup").add("#signup_signin a").click(function(e) {
   $("#signup").fadeIn(400);
   $("#window").slideDown(450);
   e.stopPropagation();
});

$(document).keyup(function(e) {
    if (e.keyCode == 27) {
       $("#signup").fadeOut(250);
       $("#window").slideUp(450);
    }
});

$(window).click(function() {
    if(this.id !== "popup") {
      $("#signup").fadeOut(250);
      $("#window").slideUp(450);
    }
});

$("#window").on("click", function(e){
   e.stopPropagation();
});

除了黑匣子和注册按钮外，Esc在任何地方使用或点击时都会淡出。

Answer 3

你可以这样做：

   $("div #window").click(function(e){


    return false;


});

$(document.body).click(function(){


        $("#signup").fadeOut(250);
        $("#window").slideUp(450);


})

Fiddle DEMO

Answer 4

选项1：

$("#window").on("click", function (e) {
    //stop propagation so that it's not handled in document root.
    e.stopPropagation();
});

//if not stopped by window i.e. not clicked on #window then handle and hide.
$(document).on("click", function (e) {
    $("#signup").fadeOut(250);
    $("#window").slideUp(450);
});

选项2：

$(document).on("click", function (e) {
    if(e.target.id === 'window') return;

    $("#signup").fadeOut(250);
    $("#window").slideUp(450);
});

Answer 5

使用stopPropagation（）：

http://jsfiddle.net/h2HzN/4/

$(document).keyup(function(e) {
    if (e.keyCode == 27) {
        $("#signup").fadeOut(250);
        $("#window").slideUp(450);
    }
}).click(function(){
    $("#signup").fadeOut(250);
    $("#window").slideUp(450); 
});
//if you click within #window, the document.click will not trigger.
$("#window").on("click", function(e){
    e.stopPropagation();
});

单击除div之外的任何内容时，jQuery隐藏

5 个答案: