Bootstrap 弹出窗口 - 显示在底部
Bootstrap Popover - Showing at the bootom
我想在用户选择网页上的文本时显示弹出窗口 - 我使用的代码如下显示弹出窗口
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>
它有效,但它在页面底部显示弹出窗口,而不是在我已明确定义 div
的所选文本底部显示弹出窗口。
截图如下
弹出窗口显示在页脚之后,如何让它显示在所选文本的底部?
任何想法
干杯
试试这个(不确定这是否是一个好方法;))
setTimeout(function() {
$(".popover").css({"top": evt.clientY + 10, "left": evt.clientX - 100});
}, 500);
之后
$('body').popover(popOverSettings);
您需要将弹出窗口的顶部位置设置为所选文本位置,而不是文本包含元素的位置。
你还需要通过事件
function popNow(evt) {...}
播放here
我想在用户选择网页上的文本时显示弹出窗口 - 我使用的代码如下显示弹出窗口
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>
它有效,但它在页面底部显示弹出窗口,而不是在我已明确定义 div
的所选文本底部显示弹出窗口。
截图如下
弹出窗口显示在页脚之后,如何让它显示在所选文本的底部?
任何想法
干杯
试试这个(不确定这是否是一个好方法;))
setTimeout(function() {
$(".popover").css({"top": evt.clientY + 10, "left": evt.clientX - 100});
}, 500);
之后
$('body').popover(popOverSettings);
您需要将弹出窗口的顶部位置设置为所选文本位置,而不是文本包含元素的位置。
你还需要通过事件
function popNow(evt) {...}
播放here