标签：分享 orm head closed on() 按钮 leave boot log
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>悬浮窗口</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> </head> <body> <a href="#" id="abc" class="btn btn-lg btn-danger" data-toggle="popover" >xxxxxx</a> <!--JavaScript插件都是依赖与jQuery库--> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script> /** * $(function() { alert($(‘[data-toggle="popover"]‘).attr("data-toggle")); */ $(function() { $("[data-toggle=‘popover‘]").each(function() { var element = $(this); element.popover({ trigger: ‘manual‘, html: true, title: ‘kkkk‘, placement: ‘bottom‘, content: function() { return content(); } }).on("mouseenter", function() { var _this = this; $(this).popover("show"); $(this).siblings(".popover").on("mouseleave", function() { $(_this).popover(‘hide‘); }); }).on("mouseleave", function() { var _this = this; setTimeout(function() { if(!$(".popover:hover").length) { $(_this).popover("hide") } }, 100); }); }); }); //模拟动态加载内容(真实情况可能会跟后台进行ajax交互) function content() { var data = $("<form><ul><li><span aria-hidden=‘true‘ class=‘icon_globe‘></span> <font>粉丝数:</font>7389223</li>" + "<li><span aria-hidden=‘true‘ class=‘icon_piechart‘></span> <font>关注:</font>265</li>" + "<li><span aria-hidden=‘true‘ class=‘icon_search_alt‘></span> <font>微博:</font>645</li>" + "<li><span aria-hidden=‘true‘ class=‘icon_pens_alt‘></span> <font>所在地:</font>台湾</li>" + "<input id=‘btn‘ type=‘button‘ value=‘关注‘ onclick=‘test()‘/></form>"); return data; } //模拟悬浮框里面的按钮点击操作 function test() { alert(‘关注成功‘); } </script> <div></div> </body> </html>
效果图：
鼠标未移入时：
当鼠标移入(悬停)在上面时：
标签：分享 orm head closed on() 按钮 leave boot log
原文地址：http://www.cnblogs.com/linjiaxiaomeiainia/p/6986256.html
