bootstrap弹出框popover

今天学习了bootstrap弹出框的功能可以消失的弹出框

1.引用bootstrap的js和css然后开始写代码

解读：id来取dom点。 tabindex="0" role="button" role和a标签来适应各个浏览器。 data-trigger="focus"控制可以隐藏. data-placement="bottom" left.right top控制方向。

<a id="ee"  class="btn btn-default" tabindex="0" role="button" data-toggle="popover"  data-placement="bottom"   data-trigger="focus" title="操作" data-content="这里是弹出框的内容所在">操作</a>

2.jquery进行调用

 id="ee"    data-toggle="popover" 

      $('#ee').popover();

写入弹出框样式一

js：

$(document).ready(function(){ 
//导入 导出 popover
    var colleaguestring="<ul class='ul-popover'>"  
             +"<li><a href='http://10.10.20.121:8088/webadmin/eim/nav.jsp'><i class='fa fa-sign-in'></i>导入</a></li>"  
             +"<li><a> <i class='fa fa-sign-out'></i>导出</a></li>"  
         +"</ul>";  
    $("#moerPopover").popover({
        placement : 'right',
        html: 'true',   
        content : colleaguestring,     //这里可以直接写字符串，也可以 是一个函数，该函数返回一个字符串；  
        animation: false  
    });

});

html：

<button class="btn-tip pull-left" id="moerPopover" target="_blank">
 <i class="fa fa-ellipsis-h"></i>

</button>

写入弹出框样式二
js:

$(document).ready(function(){ 
    $("#moerPopover").popover({
        placement : 'right',
        html: 'true',   
        content : $("#importBoxItem").html(),     //这里可以直接写字符串，也可以 是一个函数，该函数返回一个字符串；  
        animation: false  
    });
});

html:

<button class="btn-tip pull-left" id="moerPopover" target="_blank">
<i class="fa fa-ellipsis-h"></i>
</button>
<div id="importBoxItem" class="hide">
<form:form id='portForm' modelAttribute='user' action='/imweb/a/userinfo/userinfo/list' method='post' >
<ul class='ul-popover'>
<li><a οnclick='Import();'><i class='fa fa-sign-in'></i>导入</a></li>
<li><a οnclick='Export();'><i class='fa fa-sign-out'></i>导出</a></li>
</ul>
</form:form>
</div>

解决点击弹出按钮旁空白关闭后导致按钮点击两次执行弹出

方法：新建一按钮，当点击按钮时执行$().popover("show");点击空白处时执行$().popover("hide");

具体代码如下：

<a href="#" class="btn-tip pull-left btn-show" type="button" id="moerPopoverShow">
打开
</a>
<a href="javascript:void(0)" class="btn-Popover pull-left" id="moerPopover" target="_blank"></a>
<div id="importBoxItem" class="hide">
<ul class='ul-popover'>
<li><a οnclick='Import();'><i class='fa fa-sign-in'></i>导入</a></li>
</ul>
</div>

javascript:

$(document).ready(function(){ 
    $("#moerPopover").popover({
        placement : "right",
        html: "true",   
        content : $("#importBoxItem").html(),     //这里可以直接写字符串，也可以 是一个函数，该函数返回一个字符串；  
        animation: false  
    });
});
$(function () {
$("#moerPopover").popover();
});
$("body").click(function (event) { 
    var target = $(event.target);                       // 判断自己当前点击的内容  
    if (!target.hasClass("btn-show")) {  
        $("#moerPopover").popover("hide");             // 当点击body的非弹出框相关的内容的时候，关闭所有popover  
    }else{
    $("#moerPopover").popover("show");
    }
});