今天学习了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"); } });
