我们能得到弹窗被解雇的方式一样的情态动词,即。使他们关闭时,用户点击以外的地方?
不幸的是,我不能用真实的模态来代替弹窗,因为模态意味着位置:固定,那样就没有弹窗了。:(
我们能得到弹窗被解雇的方式一样的情态动词,即。使他们关闭时,用户点击以外的地方?
不幸的是,我不能用真实的模态来代替弹窗,因为模态意味着位置:固定,那样就没有弹窗了。:(
当前回答
答案很好,只要添加一个angular指令,以防你像我一样使用angular:
app.directive('popover', ['$document', function($document) {
return {
restrict: 'EA',
link: function(scope, elem, attrs) {
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
});
elem.bind('click', function(e) {
$('#notification').popover('toggle');
})
$('body').on('click', function (e) {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that triggers a popup
if (!elem.is(e.target)
&& elem.has(e.target).length === 0
&& $('.popover').has(e.target).length === 0) {
elem.popover('hide');
}
});
}
};
}]);
html代码:
<a popover tabindex="0" role="button"
id="notification"
data-toggle="popover" data-trigger="manual"
data-container="body" data-placement="bottom"
data-content="This is a popover">
Popover button
</a>
它应该像使用data-trigger='click focus'一样简单,因为根据bootstrap:
弹出窗口如何触发-点击|悬停|焦点|手动。你可以传递多个触发器;用一个空格把它们分开。手动不能与任何其他触发器结合使用。
然而,由于未知的原因,同时使用点击和聚焦并不适合我,相反,我必须手动切换它。
其他回答
最简单,最安全的版本,适用于任何引导版本。
演示: http://jsfiddle.net/guya/24mmM/
演示2:在弹出窗口内容中单击时不会解散 http://jsfiddle.net/guya/fjZja/
演示3:多个弹窗: http://jsfiddle.net/guya/6YCjW/
简单地调用这一行将会解散所有弹窗:
$('[data-original-title]').popover('hide');
当点击外部时,用下面的代码解散所有弹出窗口:
$('html').on('click', function(e) {
if (typeof $(e.target).data('original-title') == 'undefined') {
$('[data-original-title]').popover('hide');
}
});
上面的代码片段在主体上附加了一个单击事件。 当用户点击弹出窗口时,它会正常运行。 当用户点击非弹窗的东西时,它会关闭所有弹窗。
它还可以与Javascript启动的弹窗一起工作,而不是其他一些不工作的例子。(详见演示)
如果你不想在点击弹出窗口内容时取消,请使用以下代码(参见第二个演示的链接):
$('html').on('click', function(e) {
if (typeof $(e.target).data('original-title') == 'undefined' && !$(e.target).parents().is('.popover.in')) {
$('[data-original-title]').popover('hide');
}
});
jQuery("#menu").click(function(){ return false; });
jQuery(document).one("click", function() { jQuery("#menu").fadeOut(); });
根据http://getbootstrap.com/javascript/#popovers,
<button type="button" class="popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="Popover Content">Dismissible popover</button>
使用焦点触发器可以在用户下一次单击时取消弹出窗口。
$('.popover-dismiss').popover({
trigger: 'focus'
})
这个解决方案很有效:
$("body") .on('click' ,'[data-toggle="popover"]', function(e) {
e.stopPropagation();
});
$("body") .on('click' ,'.popover' , function(e) {
e.stopPropagation();
});
$("body") .on('click' , function(e) {
$('[data-toggle="popover"]').popover('hide');
});
只需将此属性添加到html元素,以关闭弹出窗口在下次点击。
data-trigger="focus"
参考来自https://getbootstrap.com/docs/3.3/javascript/#dismiss-on-next-click