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');
      }
   }
});

Answer 2

// only trigger once
$('body').one('click', function(e) {
  var $target = $(e.target);

  // the $target which trigger click event is not the popup dom itself
  // and also is not the children dom of the popup
  if (!$target.is('#alert-center') && $target.parents('#alert-center').length === 0) {
    $("#alert-center, #message-center, #user-message-center").removeClass('open');
  }
})

这就是你想要的吗？现在，您可以在弹出窗口中添加任何标签，然后在不隐藏它的弹出区域内单击。

Answer 3

将弹出式HTML更改为：

<div id="alert-center-outer" class="onclick-dropdown">
  <div id="alert-center">
    //CONTENT HERE...
    <p>Lorem Ipusm</p>
  </div>
</div>

#alert-center-outer{
  position: fixed;
  left; 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background-color: black;
}
#alert-center{
  width: 200px;
  height: 300px;
  margin: 0 auto;/*This will center align it.*/
}

单击＃alert-center-outer应隐藏弹出窗口。

点击＃alert-center应该stopPropagation，以便它不会冒泡到其父级。

Answer 4

尝试以下代码

$(document).ready(function(){
  $(".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');        
});
    $(document).click(function(e) { 
    if (!$(e.target).closest('.onclick-dropdown').length)
     
               $("#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>
 <div id="alert-center" class="onclick-dropdown">
            <p>Lorem Ipusm</p>
        </div>
        
         <li class="alert-center-link"><a class="onclick-dropdown-link" href="#alert-center">asdfsdfsdfds</a></li>

如何弹出窗口只有在点击它外面的任何地方时才会消失

4 个答案: