[英]Close bootstrap popover when clicking outside
Similar question already asked but not for this example.类似的问题已经问过,但不是这个例子。
Here we have the code for the popover:这里我们有弹出窗口的代码:
HTML: HTML:
<a href="#" class="popover_test">Popover Example</a>
<!-- POPOVER -->
<div id="content" class="hidden">
Contents
</div>
<div id="title" class="hidden">
Title
</div>
Javascript: Javascript:
$(".popover_test").popover({
html : true,
content: function() {
return $("#content").html();
},
title: function() {
return $("#title").html();
}
});
What is the approch in order to disappear it when i click outside of the popover ?当我在弹出框外单击时,要使其消失的方法是什么?
Here a JSFIDDLE to test it online: https://jsfiddle.net/C5GBU/1772/这里有一个 JSFIDDLE 在线测试: https ://jsfiddle.net/C5GBU/1772/
$(".popover_test").popover({ html : true, content: function() { return $("#content").html(); }, title: function() { return $("#title").html(); } });
.hidden { display: none; }
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/> <a href="#" class="popover_test">Popover Example</a> <!-- POPOVER --> <div id="content" class="hidden"> Contents </div> <div id="title" class="hidden"> Title </div>
Thank's.谢谢。
Check the following code -检查以下代码 -
$('[data-toggle="popover"]').popover();
$('body').on('click', function (e) {
if ($(e.target).data('toggle') !== 'popover'
&& $(e.target).parents('.popover.in').length === 0) {
$('[data-toggle="popover"]').popover('hide');
}
});
Once again I have made an edit: https://jsfiddle.net/C5GBU/1775/我再次进行了编辑: https : //jsfiddle.net/C5GBU/1775/
$(".popover_test").popover({
html: true,
content: function() {
return $("#content").html();
},
title: function() {
return $("#title").html();
}
}).on('click', function(e) {
$('.popover-content').click(function(e) {
e.stopPropagation();
})
});
$('body').on('click', function(e) {
$('.popover_test').each(function() {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that triggers a popup
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover_test').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
Please let me know if this works请让我知道这是否有效
Answer can be found on 11703093可以在11703093上找到答案
$(document).on('click', function (e) {
$('[data-toggle="popover"],[data-original-title]').each(function () {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that triggers a popup
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0)
{
(($(this).popover('hide').data('bs.popover')||{}).inState||{}).click = false // fix for BS 3.3.6
}
});
}); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.