Question

我正在尝试开发一个扩展程序，该扩展程序会在弹出窗口中显示有关文本选择的一些信息。

与Google字典Chrome扩展程序的方式非常相似。

如何在所选文本上动态添加弹出框？

这是我尝试过的。但是我想要类似Google Dictionary Popover的

。

content.css

.selection_bubble {
  position: absolute;
  font-family: arial;
  font-size: 1.1em;
  background: #a53d38;
  color: #fff;
  border-radius: 10px;
  padding: 20px;
  max-width: 400px;
  z-index:4;
  display: none;
}

content.css

.selection_bubble {
  position: absolute;
  font-family: arial;
  font-size: 1.1em;
  background: #a53d38;
  color: #fff;
  border-radius: 10px;
  padding: 20px;
  max-width: 400px;
  z-index:4;
  display: none;
}


content.js

// Add bubble to the top of the page.
var bubbleDOM = document.createElement('div');
bubbleDOM.setAttribute('class', 'selection_bubble shadow');
document.body.appendChild(bubbleDOM);

document.addEventListener('mouseup', function (e) {
  var selection = window.getSelection().toString();

  s = window.getSelection();
  oRange = s.getRangeAt(0); //get the text range
  oRect = oRange.getBoundingClientRect();

renderBubble(e.clientX, e.clientY, 'Loading....');

});

function renderBubble(mouseX, mouseY, selection) {
    var top  = window.pageYOffset || document.documentElement.scrollTop,
    left = window.pageXOffset || document.documentElement.scrollLeft;

    bubbleDOM.innerHTML = selection;
  bubbleDOM.style.top = top + mouseY - 220 + 'px';
    bubbleDOM.style.left = left + mouseX - 140 + 'px';
    bubbleDOM.style.display = 'inline-block';
}

这显示气泡，但这并不令人满意。我希望气泡根据所选文本的视口准确显示在顶部或底部。

任何帮助/建议都是很好的帮助。

谢谢。

在选择文字时显示弹出框

0 个答案: