Question

我在这里看了类似的问题但是他们中的任何人都没有让我到处找。

所以我的设置是这样的：

<body>
  ...some code
  <button id="button" onClick="showPopup()">click me!</button> 
  <div id="popup">
    ...stuff
  </div>

  ..some more code

</body>

我的css

#popup{
  z-index:2;
  ...other styling
}

而其他一切都是z-index 1

和javascript

$("#popup").hide();   //default
function showPopup(){
   $("#popup").show();
}

我希望弹出窗口在单击按钮时显示，并在单击其他任何位置时隐藏。

$(document).click(function (e){$("#popup").hide();}

这不起作用，因为弹出窗口是文档的一部分，因此当单击该按钮时，它会立即显示隐藏。我也尝试添加类并隐藏如果hasClass但不起作用。 z-index不同的事实与它有关吗？

Answer 1

删除内联事件处理程序并执行

$("#popup").hide();

$(document).on('click', function(e) {

    if ( $(e.target).closest('#button, #popup').length ) {
        $('#popup').show();
    } else if ( $('#popup').is(':visible') ) {
        $('#popup').hide();
    }

});

FIDDLE

Answer 2

在弹出窗口中添加一个处理程序以停止事件冒泡，因此如果在弹出窗口中发生，则单击事件将无法访问文档。也不要使用内联onclick处理程序，因为你有更多不引人注意的方法jQuery：

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

$('#button').click(function(e) {
    $("#popup").show();
    e.stopPropagation();
});

$(document).click(function (e){
    $("#popup").hide();
});

查看下面的演示。

＆＃13;

$('#button').click(function(e) {
    $("#popup").show();
    e.stopPropagation();
});

$(document).click(function (e){
    $("#popup").hide();
});

$('#popup').click(function(e) {
    e.stopPropagation();
});

＆＃13;

#popup{
  z-index:2;
  display: none;
  background: #EEE; 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">click me!</button>
<div id="popup">...stuff</div>

＆＃13;

Answer 3

我可能会在你的javascript中写更多内容并将onClick=从中删除。这只是我个人的偏好。

这是我如何接近它：

$(document).on('click', '#button', function(){
    $('#popup').show();
});
$(document).not('#button').on('click', function(){
    $('#popup').hide();
});

如果您将此操作视为模态，我建议您在屏幕上设置#popup固定位置，并在100％宽度和高度上添加，然后在弹出窗口中添加一个容器，您可以将其设置为看起来像你想要的任何模态。然后，当您点击#popup封面时，它会隐藏它。

Answer 4

所有有效答案都有意义，但没有一个对我有用。看起来像

$(document).click(function (e){
    $("#popup").hide();
    alert("test");
});

从不起作用，不会隐藏或提醒我。我认为这与我正在处理的环境有关（Phonegap应用程序）

我最后添加了一个单击以关闭它的按钮。

单击按钮显示，在其他地方隐藏

4 个答案: