使用Fokus的模态样式文本选择

Every once in a while I find a tiny JavaScript library that does something very specific, very well.  My latest find, Fokus, is a utility that listens for text selection within the page, and when such an event occurs, shows a beautiful modal dialog in the background of the entire page, allowing only the highlighted block to display at it's normal mode.

偶尔我会发现一个很小JavaScript库，它做的非常好，非常好。 我的最新发现Fokus是一种实用程序，可侦听页面中的文本选择，并且当发生此类事件时，它会在整个页面的背景中显示漂亮的模式对话框，仅允许突出显示的块以其正常模式显示。

View Demo 观看演示

HTML (The HTML)

Nothing special needs to be done with the page HTML, and you don't create "active" zones -- simply include the JavaScript file at the bottom of the page:

页面HTML不需要做任何特别的事情，并且您无需创建“活动”区域-只需在页面底部添加JavaScript文件即可：

<!-- at bottom of the page -->
<script src="fokus/js/fokus.min.js" async></script>

The overlay elegantly fades in and out.  Canvas is used to create the overlay, and CSS' pointer-events property is used to ensure event handling consistency.  It would be great if Fokus was a bit more modular, including allowing active zones and customized overlay color, but it's hard to complain about anything else with Fokus.

覆盖层淡入淡出。 Canvas用于创建叠加层，而CSS的pointer-events属性用于确保事件处理的一致性。 如果Fokus更具模块化，包括允许活动区域和自定义的覆盖颜色，那就太好了，但是Fokus很难抱怨其他任何事情。

View Demo 观看演示

Fokus isn't a necessity for any site, but I was taken aback by how smooth and accurate Fokus is.  Weighing in at just 3KB, it's an impressive little library.  Have an idea for how you'd use Fokus?  Share it!

Fokus并不是任何站点的必需品，但是Fokus如此平滑和准确使我感到惊讶。 它只有3KB的重量，是一个令人印象深刻的小图书馆。 有一个关于如何使用Fokus的想法吗？ 分享它！

翻译自: https://davidwalsh.name/fokus