jquery 划词选中后弹出按钮

类似这样

需要给允许触发划词弹出的容器一个class="works-content"

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
(function($){
    $('<div class="card" id="huaci" style="box-shadow: 0 2px 10px 0 rgba(0,0,0,.1);"><button type="button" class="btn btn-sm btn-annotate">注释</button></div>').appendTo('body');
    $('#huaci').css({ display : 'none', position : 'absolute', cursor : 'pointer' });
    var funGetSelectTxt = function() {
        var txt = '';
        if(document.selection) {
            txt = document.selection.createRange().text;
        } else {
            txt = document.getSelection();
        }
        return txt.toString();
    };
    $('.works-content').mouseup(function(e) {
        if (e.target.id == 'huaci') {return}
        e = e || window.event;
        var txt = funGetSelectTxt(),
        sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
        left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40,
        top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40;
        if (txt) {
            $('#huaci').css({display : 'inline', left : left, top : top });
        } else {
            $('#huaci').css('display', 'none');
        }
    });
    $('.btn-annotate').click(function() {
        var txt = funGetSelectTxt(),
        title = $('title').html();
        if (txt) {
            alert(txt);
        }
    });
})(window.$);
</script>