单击外部(正文)时关闭弹出窗口

时间:2016-05-11 14:44:07

标签: javascript jquery twitter-bootstrap

我有这样的人气:

<div class="slbb-popover popover top" role="tooltip">
   <div class="arrow"></div>
   <h2 class="popover-title">Speelland</h2>
   <div class="popover-content">And here's some amazing content. It's very engaging. Right? </div>
   <div class="text-center"><a class='btn btn-primary'>Meer informatie</a></div>
</div>

我在JavaScript中触发它们并给它们显示块。现在我想在我点击外面(正文)时关闭它们,但这段代码只会执行一次:

$('body').click(function(e){
  if(e.target.className == "btn-pointer")
      return;

  //For descendants of menu_content being clicked, remove this check if you do not want to put constraint on descendants.
  if($(e.target).closest('.btn-pointer').length)
      return;

  console.log('check1');

  //Do processing of click event here for every element except with id menu_content
  if($('.popover').css('display') == 'block') {
       $('.popover').css('display', 'none');
       console.log('check2');
   }
});

1 个答案:

答案 0 :(得分:1)

试试这个样本:

$(function() {

  var 
    status = false;

  $('body').click(function() {

    if (!status) {

      // VIEW POPUP WINDOW
      status = true;
    }
    else {

      // CLOSE POPUP WINDOW
      status = false;
    }

  });
});

Demo (with window.open())