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（This isn't Javascript但是“将编译成 JS的”小语言，希望你能得到这个想法）：

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

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

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

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

3 个答案: