修复inspinia中popover的点击问题_html-js-css

概述修复inspinia中popover的点击问题 Part1:修复问题在inspinia2.9的版本中, notifications.html这个文件中的点击示例是无法出现的在F12中会出现如下的错误提示: 需要删除代码段中的位置浮动的auto <button type="butt 修复inspinia中popover的点击问题 Part1:修复问题

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

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

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

<!--data-placement="auto bottom"把原先这段中的auto去除掉,变成位置就好了--><button type="button"            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  ><button type="button" data-bc="ok-btn" >继续</button> <button type="button" >取消</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");}

Part3: 心得分享 $("#element").popover(‘destroy‘); 是用不通的,会报错，解决就是先每次隐藏都禁用TA,在激活触发原先点击body的空白或其他区域,TIP是不消失的,需要增加额外的事件去处理