我们能得到弹窗被解雇的方式一样的情态动词,即。使他们关闭时,用户点击以外的地方?
不幸的是,我不能用真实的模态来代替弹窗,因为模态意味着位置:固定,那样就没有弹窗了。:(
我们能得到弹窗被解雇的方式一样的情态动词,即。使他们关闭时,用户点击以外的地方?
不幸的是,我不能用真实的模态来代替弹窗,因为模态意味着位置:固定,那样就没有弹窗了。:(
当前回答
根据最高的两个答案,我有一个小方法:
<span class="btn btn-info btn-minier popover-info" data-rel="popover"
data-placement="bottom" data-html="true" title=""
data-content="popover-content"
data-original-title="popover-title">
<i class="ace-icon fa fa-info smaller-100"></i>
</span>
$('[data-rel=popover]').popover({html: true});
$(document).on("shown.bs.popover", '[data-rel=popover]', function () {
$('[data-rel="popover"][popover-show="1"]').popover('hide');
$(this).attr('popover-show', '1');
});
$(document).on("hidden.bs.popover", '[data-rel=popover]', function () {
if ($(this).attr('popover-show') === '0') {
// My important fix: using bootstrap 3.4.1, if hide popover by .popover('hide') and click to show, popover internal treat it is already shown and dispatch hidden event immediately without popover anything.
$(this).popover('toggle');
} else {
$(this).attr('popover-show', '0');
}
});
$('html').on('click', function (e) {
if (typeof $(e.target).data('original-title') == 'undefined'
&& typeof $(e.target).parent().data('original-title') == 'undefined'
&& !$(e.target).parents().is('.popover.in')) {
$('[data-rel="popover"][popover-show="1"]').popover('hide');
}
});
其他回答
使用bootstrap 2.3.2,你可以将触发器设置为“focus”,它就可以工作了:
$('#el').popover({trigger:'focus'});
我试过很多以前的答案,真的没有一个对我有效,但这个解决方案管用:
https://getbootstrap.com/docs/3.3/javascript/#dismiss-on-next-click
他们建议使用锚标记而不是按钮,并注意role="button" + data-trigger="focus" + tabindex="0"属性。
Ex:
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover"
data-trigger="focus" title="Dismissible popover" data-content="amazing content">
Dismissible popover</a>
用3.3.6测试,第二次点击是ok的
$('[data-toggle="popover"]').popover()
.click(function () {
$(this).popover('toggle');
});;
$(document).on('click', function (e) {
$('[data-toggle="popover"]').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');
}
});
});
jQuery("#menu").click(function(){ return false; });
jQuery(document).one("click", function() { jQuery("#menu").fadeOut(); });
这基本上不是很复杂,但有一些检查要做,以避免故障。
演示(jsfiddle)
var $poped = $('someselector');
// Trigger for the popover
$poped.each(function() {
var $this = $(this);
$this.on('hover',function() {
var popover = $this.data('popover');
var shown = popover && popover.tip().is(':visible');
if(shown) return; // Avoids flashing
$this.popover('show');
});
});
// Trigger for the hiding
$('html').on('click.popover.data-api',function() {
$poped.popover('hide');
});