前端js实现点击文字弹出小框

拼搏现实的明天。 2023-07-04 14:16 31阅读 0赞

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NvV2hhdFdvcmxk_size_16_color_FFFFFF_t_70][]

代码：

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NvV2hhdFdvcmxk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200211212616359.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NvV2hhdFdvcmxk,size_16,color_FFFFFF,t_70