nar*_*fie 4 jquery twitter-bootstrap
我在一个页面上有多个弹出框,它们都有一个关闭按钮。
如果我通过单击打开它的同一个按钮来关闭弹出窗口,我没有问题。当我单击弹出窗口中的关闭按钮之一时,问题就出现了。
当我点击弹出窗口中的关闭按钮时,弹出窗口关闭,但下次我点击打开它时,它不会打开。只有当我第二次单击该按钮时它才会打开。
HTML:
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="<div class="clearfix"><div class="btn-group"><button class="btn btn-success btn-sm">Yes</button><button class="btn btn-default btn-sm close-popover" data-dismiss="popover" >No</button></div></div></div>" title="Delete this">Delete this</button>
Run Code Online (Sandbox Code Playgroud)
JS:
$.fn.extend({
popoverClosable: function (options) {
var defaults = {
html: true,
template:
'<div class="popover">\
<div class="arrow"></div>\
<div class="popover-header">\
<button type="button" class="close" data-dismiss="popover" aria-hidden="true">×</button>\
<h3 class="popover-title"></h3>\
</div>\
<div class="popover-content"></div>\
</div>'
};
options = $.extend({}, defaults, options);
var $popover_togglers = this;
$popover_togglers.popover(options);
$popover_togglers.on('click', function (e) {
e.preventDefault();
$popover_togglers.not(this).popover('hide');
});
$('html').on('click', '[data-dismiss="popover"]', function (e) {
$popover_togglers.popover('hide');
});
}
});
$(function () {
$('[data-toggle="popover"]').popoverClosable();
});
Run Code Online (Sandbox Code Playgroud)
每次单击按钮打开它时,如何让我的弹出窗口打开?
看起来像是 3.3.5 中的错误。见https://github.com/twbs/bootstrap/issues/16732
我已经解决了它:
if ($.fn.popover.Constructor.VERSION == "3.3.5") {
$('[data-toggle="popover"]').on("hidden.bs.popover", function() {
$(this).data("bs.popover").inState.click = false
})
}
Run Code Online (Sandbox Code Playgroud)