Question

我想在用户选择网页上的文字时显示一个弹出窗口 - 我正在使用的代码如下显示弹出窗口

HTML

<div id="popover-content" style="display:none">
    <button class="pop-sync">Share</button>
    <button class="pop-delete">Save</button>
</div>

的Javascript

<script>
    var div = null;
    function popNow() {
        var selection = window.getSelection(), 
            range = selection.getRangeAt(0), 
            rect = range.getBoundingClientRect(); 

        if (rect.width > 0) {
            if (div) {
                div.parentNode.removeChild(div);
            }
            div = document.createElement('div'); // create div to show popover on          
            document.body.appendChild(div); // append div with selected text
            var popOverSettings = {
                placement: 'bottom',
                container: 'body',
                html: true,
                div: '[rel="popover"]', //setting div for popover
                content: function () {
                    return $('#popover-content').html();
                }
            }
            $('body').popover(popOverSettings);
        }
    }
    window.onmouseup = popNow;
</script>

它可以工作，但它在页面底部显示popover，而不是在我明确定义div的所选文本的底部。

屏幕截图如下

在页脚后面显示popover，如何在选定文本的底部显示？

任何想法

干杯

Answer 1

试试这个（不确定它是否是一个好方法;））

setTimeout(function() {
        $(".popover").css({"top": evt.clientY + 10, "left": evt.clientX - 100});
      }, 500);

后

$('body').popover(popOverSettings);

您需要将弹窗的顶部位置设置为选定的文本位置，而不是包含文本元素的位置。

您还需要传递事件

function popNow(evt) {...}

播放here

Bootstrap Popover - 显示在bootom

1 个答案: