javascript - 如何使弹出窗口仅在单击其外部的任何位置时消失

Question

我试图在单击特定链接时切换弹出窗口，然后在单击弹出框以外的任何地方时从中删除类“.open”。

使用下面的方法，当在弹出窗口外单击时，我能够让弹出窗口消失，但现在当在弹出窗口区域内单击时，它也会消失。

    $(".onclick-dropdown-link, .user-message-center-link").on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        var $this = $(this);
        var id = $this.attr('href');
        $('.onclick-dropdown').not(id).removeClass('open');
        $(id).toggleClass('open');        
    });
        $('body:not(.onclick-dropdown.open)').click(function(e) {
            $("#alert-center, #message-center, #user-message-center").removeClass('open');
        });

    .onclick-dropdown {
        opacity: 0;
        visibility: hidden;
        background: #f3f3f3;
        width: 390px;
        height: 390px;
        position: absolute;
        top: 128px;
        right: 28px;
        height: auto;
        padding: 0;
        z-index: 999;
    }
    .onclick-dropdown.open {
        opacity: 1;
        visibility: visible;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="alert-center-link">
        <a class="onclick-dropdown-link" href="#alert-center">The Link</a>
    </li>
</ul>
<div id="alert-center" class="onclick-dropdown">
		<p>Lorem Ipusm</p>
</div>

Answer 1

将您的 .click() 函数更改为以下内容:

$(document).click(function(e) {
  if( !$('.onclick-dropdown').is(e.target) && !$('.onclick-dropdown').children().is(e.target)) {
   if( $('.onclick-dropdown').hasClass('open') ) {
      $("#alert-center, #message-center, #user-message-center").removeClass('open');
      }
   }
});