效果圖：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
margin: 50px;
}
#demo {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
top: 0;
display: none;
}
</style>
</head>
<body>
<span id="demo"></span>
<div id="test">當年萬里覓封侯。匹馬戍梁州。關河夢斷何處，塵暗舊貂裘。胡未滅，鬢先秋。淚空流。此生誰料，心在天山，身老滄洲。</div>
</body>
</html>
<script>
function $(id) {return document.getElementById(id)}
$("test").onmouseup = function (event) {
var event = event || window.event;
var x = event.clientX;
var y = event.clientY;
var txt;
if (window.getSelection) {
txt = window.getSelection().toString();
}else {
txt = document.selection.createRange().txt;
}
if (txt) {
showBox(x, y, txt);
}
}
//點擊空白處隱藏
document.onmousedown = function (event) {
var event = event || window.event;
var targetId = event.target ? event.target.id : event.srcElement.id;
if (targetId != "demo") {
$("demo").style.display = "none";
}
}
function showBox(mouseX, mouseY, contentTxts) {
setTimeout(function () {
$("demo").style.display = "block";
$("demo").style.left = mouseX + "px";
$("demo").style.top = mouseY + "px";
$("demo").innerHTML = contentTxts;
}, 20);
}
</script>