当点击后面的主体时，如何淡出弹出框

Question

一旦我的弹出框已经淡入，我想让它在用户点击弹出框时消失。

目前，它逐渐消失，然后再次退出。

jQuery的

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() 。

Answer 2

我认为你需要使用event.stopPropagation（）来防止按钮上的点击事件使DOM树崩溃：

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

您还缺少jsRef函数的结束括号：

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

Answer 3

问题是两个事件都被触发，导致模态显示然后立即隐藏。 我会以不同的方式解决这个问题，将模态内容与模态包装器分开，当用户单击模态包装器时模式淡出：

<button>Show modal</button>
<div class="modal wrapper"></div>
<div class="modal body">I'm a modal!</div>

CoffeeScript（ 这不是Javascript，而是一种“编译成 JS的小语言”，希望你能得到这个想法）：

$('button').click ->
    $('.modal').show()

$('.modal.wrapper') .click ->
    $('.modal').hide()

使用一些SCSS样式工作JSFiddle （同样，SCSS不是CSS，它是一种编译成CSS的语言）。