bootstrap气泡确认

基于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");
   });

});