基于bootstrap的popover插件实现,效果如下:
插件代码:
(function ($) {
$.fn.extend({
popConfirm: function (options,fun) {
var _this = $(this);
var defaults = {
title: "提示",
content: "确认此操作?",
placement: "auto",
container: "body",
yesBtn: "确认",
noBtn: "取消"
}
options = $.extend(defaults, options);
_this.popover({
trigger: "manual",
title: options.title,
html: true,
//template: '', //你自定义的模板
placement: options.placement,
container: options.container,
content: function () {
let _btnGroup = $("<p>", {
class: "button-group",
style: "margin-top: 10px; text-align: center;",
});
let _btnNo = $("<button>", {
type: "button",
text: "取消",
style: "padding:0 6px;",
class: "btn btn-small",
click: function () {
_this.popover('destroy');
}
});
let _btnOk = $("<button>", {
type: "button",
text: "确认",
style: "padding:0 6px;margin-left:6px",
class: "btn btn-small btn-danger",
click: function () {
if (fun) {
fun();
}
_this.popover('destroy');
}
});
_btnNo.appendTo(_btnGroup);
_btnGroup.append(_btnOk);
return $("<div>").html(options.content).append(_btnGroup);
}
});
_this.popover('toggle');
}
})
}(jQuery));
用法:
<button id="btn" type="button" >
基于Popover实现气泡确认
</button>
$("#btn").click(function(){
$(this).popConfirm({ content: "删除后将无法恢复!!!!" }, function () {
alert("ok");
});
});