前端js实现点击文字弹出小框-CSDN博客

本文链接：https://blog.csdn.net/SoWhatWorld/article/details/104270288

效果图：

代码：

<!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>