<!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>
源码
效果图：
鼠标未移入时：
当鼠标移入(悬停)在上面时：
时间： 2024-10-28 20:21:29