修复inspinia中popover的点击问题

佚名 6年前 (2019-05-13) 随笔 865人围观抢沙发百度已收录

修复inspinia中popover的点击问题

Part1:修复问题

在inspinia2.9的版本中, notifications.html这个文件中的点击示例是无法出现的

在F12中会出现如下的错误提示:

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

需要删除代码段中的位置浮动的auto

<!--data-placement="auto bottom"把原先这段中的auto去除掉,变成位置就好了-->
<button type="button" class="btn btn-primary"  
         data-toggle="popover" 
         data-placement="bottom" 
         data-content="气泡提示">
    气泡提示底部
</button>

就可以出现如下图的提示信息了:

Part2:扩展功能(popConfirm)

实现一个confirm的确认功能，类似于下图所示的情况!

具体代码：

function popConfirm(source,title,successCall){
    $(source).popover({
        placement:"top",
        selector: false,
        trigger: 'click',
        html:true,
        title : title,
        content:'<p class="popover-body-p" style="text-align:center;padding-top:10px;"><button type="button" data-bc="ok-btn" class="btn btn-primary btn-xs">继续</button> <button type="button" class="btn btn-default btn-xs">取消</button></p>'
    });
    $(source).off('shown.bs.popover');
    $(source).off('hidden.bs.popover');
    $(source).on('shown.bs.popover', function () {
        $('body').on('click', function(e) {
            // console.log(e.target);
            var edom = $(e.target);
            var edomClass = $.trim(edom.attr("class"));
            if(edomClass.indexOf("popover-header") >=0 || edomClass.indexOf("popover-body")>=0) {
                console.log("header/body click return");
                return;
            }
            var bc = $.trim($(edom).data("bc"));
            if(bc=="ok-btn") {
                if(typeof(successCall)!='undefined'){
                    console.log("调用成功回调函数")
                    successCall();
                }
                $(source).popover('hide');
                $('body').unbind(e);
                return;
            }
            $(source).popover('hide');
            $('body').unbind(e);

        });
    });
    $(source).on('hidden.bs.popover',function(){
        $(source).popover("disable");
    });
    $(source).popover('enable').popover("show");
}