JavaScript/HTML : How to make a small UI pop out on select

Question

我正在制作一个 Chrome 扩展，当用户选择某些文本时，它会与当前页面进行交互。

我们想要它做的是弹出一个小窗口，让用户在不同的选项中进行选择。

类似的事情:

http://img-ipad.lisisoft.com/img/1/5/1526-1-pdf-highlighter.jpg

到目前为止我们所拥有的内容如下:

document.addEventListener('mouseup',boxOption)


function boxOption(){
   var yourSelection = window.getSelection();
   if (yourSelection!=""){
       /* insert popup here */
   }
}

任何帮助将不胜感激

Answer 1

您可以通过将一个元素插入到 DOM 中(或显示 DOM 中的现有元素)来实现弹出窗口，该元素仅具有一个“z-index”属性，将其置于其他元素之上。例如:

// Create a class that encapsulates the menu element
// This particular implementation constructs a new element
// and adds it to the DOM, but you could instead take the
// element as a parameter or have it retrieve an existing element
var PopupMenu = function() {
  this.element = document.createElement('div');
  this.element.className = 'popup-menu';
  document.body.appendChild(this.element);
  // ...
  // set up event listeners for this element
  // ...
};

// The menu is hidden unless it also has the 'enabled' class
PopupMenu.prototype.setVisible = function(isVisible) {
   if (isVisible) {
     this.element.classList.add('enabled');
   } else {
     this.elemnt.classlist.remove('enabled');
   }
};

然后在你的 CSS 中，你可以这样做:

.popup-menu {
  display: none;
}
.popup-menu.enabled {
  display: block;
  /* this just needs to be larger than the z-index of the items it covers */
  z-index: 100;
}

我会将菜单的其余样式/处理程序留给您。