javascript - 单击弹出框后面的主体时，如何淡出弹出框

Question

一旦我的弹出框淡入，我希望它在用户点击远离弹出框时消失。

目前，它淡入然后又直接淡出。

查询

function jsRef(){
   $('#footButton').click(function(){
   $('#refPop').fadeIn(1000);
});

$('body').click(function(){
    $('#refPop').fadeOut(1000);
});

HTML

<button id="footButton" onClick="jsRef()" type="button">References</button>

编辑**有问题的文件通过 PHP include 位于主文件的底部。单击主文件正文时，弹出框应淡出

Answer 1

将e.stopPropagation()添加到按钮点击或打开弹出窗口后添加正文点击事件。

喜欢:

$('#footButton').click(function(){
   $('#refPop').fadeIn(1000);

   $('body').click(function(){
       $('#refPop').fadeOut(1000);
   });
});

或者:

$('#footButton').click(function(e){
    e.stopPropagation()
    $('#refPop').fadeIn(1000);
});
$('body').click(function(){
    $('#refPop').fadeOut(1000);
});

我肯定更喜欢 e.stopPropagation() 解决方案。此外，您不需要在按钮的 onClick 属性中使用 jsRef() 函数。