使用HTML关闭弹出窗口点击外部

我正在使用Bootstrap弹出窗口和弹出窗口内容是HTML。我正在使用下面的代码来初始popover。此代码是基于https://stackoverflow.com/a/13203876/1354727这个答案。弹出窗口内容与ID分别为#song-status-popover。使用HTML关闭弹出窗口点击外部

$(".song-status-link").popover({ 
      html: true, 
      placement: 'bottom', 
      content: function() { 
       return $("#song-status-popover").html(); 
      } 
});

我想关闭酥料饼，当我点击酥料饼的外面，所以我用下面的代码为：

$('html').on('mouseup', function (e) { 
      if (!$(e.target).closest('.popover').length) { 
       $('.popover').each(function() { 
        $(this).closest('div.popover').popover('hide'); 
       }); 
      } 
});

到目前为止它做得很好，但我现在面临一个问题，使用两个代码一起。当我打开弹出窗口并单击外部关闭它时，如果再次单击链接打开弹出窗口，它在第一次单击时不会打开。我必须点击两次才能打开它。

我想知道我什么是缺少的，以及为什么我不能通过单击外部关闭后点击一次点击打开弹出窗口。请帮忙！

更新：我相信，当我点击外面隐藏酥料饼，但仍举认为它是开放的，在第一次点击它实际上考虑关闭并第二次点击打开酥料饼。

来源

2016-07-29 Nizam Kazi

你能在jsfiddle中复制你的错误吗？ – madalinivascu

你有没有试过这个http://stackoverflow.com/questions/28558865/popup-window-close-on-click-outside-not-inside-jquery –

不要相信它是最难做的事情。无论你有没有让它在悬浮状态下可见，并隐藏在blur.or你可以去默认属性点击显示并点击隐藏（如果你在同一页面上有多个弹出窗口）。这个问题已被问了很多次。 – Bugfixer

试试下面的代码

$('html').on('click', function(e) { 
    if (!$(e.target).is('.song-status-link') && $(e.target).closest('.popover').length == 0) { 
    $(".song-status-link").popover('hide'); 
    } 
});

http://jsfiddle.net/xzeb91hf/

来源

2016-07-29 09:09:56 madalinivascu

我想这会帮助我隐藏弹出当我点击侧面。我的脚本已经这样做了。但是，当我点击链接再次打开popover时，我必须点击两次，因为它没有在第一次点击时打开。 –

为什么你使用mouseup事件而不是点击事件？ – madalinivascu

，因为这个代码'（'html'）。on（'click''只是限制弹出窗口被打开，因为它立即隐藏了它。 –

你必须.find()它检查它的公开程度/可用性在DOM与:visibile：

if ($(this).find('.popover:visible').length) { 
    $('.popover').popover('hide'); 
}

来源

2016-07-29 08:43:51 Jai

这实际上是可能本身有bootstrap，唯一的缺点是popover内不能有任何可聚焦的元素。

查找区域点击下一步点击official documentation。

它基于触发弹出窗口的焦点事件和模糊事件以再次隐藏它。点击触发链接外部会触发模糊事件，弹出窗口将隐藏。

来源

2016-07-29 09:28:11

使用HTML关闭弹出窗口点击外部

回答

相关问题