在当前光标位置打开模态窗口 JavaScript

在前端开发中，常常需要在用户操作时弹出模态窗口以获得用户的输入或选择。下面，我们就来介绍一种在当前光标位置打开模态窗口的 JavaScript 实现方法。

实现步骤

1. 首先，在 HTML 中定义一个隐藏的模态窗口元素，该元素应包含需要在模态窗口中显示的内容和相应的交互控件，例如输入框、下拉列表等等。

   <div id="modal" style="display: none;">
     <h3>模态窗口标题</h3>
     <input type="text" placeholder="请输入内容">
     <button>确认</button>
     <button>取消</button>
   </div>
   

2. 然后，在 JavaScript 中定义一个打开模态窗口的函数，该函数应将模态窗口元素插入到当前光标所在的位置，并将其显示出来。具体实现可参考以下代码：

   function openModal() {
     const modal = document.getElementById('modal');
     const range = window.getSelection().getRangeAt(0);
     const rect = range.getBoundingClientRect();
     modal.style.left = rect.left + window.pageXOffset + 'px';
     modal.style.top = rect.top + rect.height + window.pageYOffset + 'px';
     document.body.appendChild(modal);
     modal.style.display = 'block';
   }
   

   该函数中，我们首先获取隐藏的模态窗口元素，然后通过 window.getSelection().getRangeAt(0) 获取当前光标所在的范围（即选区），再使用 getBoundingClientRect() 获取该范围对应的矩形区域。最后，将模态窗口元素插入到当前文档的 body 元素中，并设置其 display 样式为 block。

3. 最后，在 HTML 中为需要触发模态窗口的操作添加一个事件监听器，调用以上定义的打开模态窗口的函数即可。例如：

   <button onclick="openModal()">打开模态窗口</button>
   

注意事项

• 由于模态窗口会在当前光标所在位置打开，因此必须先确保存在一个光标（即在输入框、文本域等具有输入功能的元素中）。
• 由于文本可能会溢出浏览器窗口，因此需要在打开模态窗口时对模态窗口元素的位置进行适当的调整，以确保模态窗口能够完全显示在浏览器窗口内。
• 由于模态窗口会在当前文档的 body 元素中创建，因此必须确保在模态窗口关闭后将其从 body 元素中移除。否则可能会影响其他操作的正确性。

以上就是在当前光标位置打开模态窗口的 JavaScript 实现方法，希望能对大家的前端开发工作有所帮助！