javascript - 如果在模态对话框之外进行单击，如何禁用用户进行的所有单击

Question

在我当前的项目中，我正在打开一个模态对话框，该对话框在单击按钮时打开，现在如果用户单击模态对话框之外的任何位置，则浏览器应忽略单击并且模态对话框应获得焦点，如何实现？

score 3 · Accepted Answer

显示模式对话框时禁用背景点击的标准方法是创建一个（半）透明 div（带有背景图像）并使用它来拦截所有点击。

你的对话框被放置在这个透明的 div 上。

像 jQuery 这样的框架会为你做这件事，所以你不必担心 js 是否正确。

score 1 · Accepted Answer

签出模式对话框和相关技术。假设您使用 jQuery UI 进行对话框，该选项是内置的。如果没有，您可以检查他们的实现。

score 0 · Accepted Answer

有一个名为 onblur 的文档或窗口的事件，基本上你想设置一个函数，如果用户点击其他窗口，它将把窗口的焦点带回你的弹出窗口。

伪代码如下：

    <script>
function bringBackFocus()
{
window.focus();
}
</script>
    <body onBlur="bringBackFocus()">
    </body>

score 0 · Accepted Answer

在 jqueryui 对话框中有一个名为 Modal 的属性，将其设置为 true 它将禁用除对话框之外的所有内容 Jquery Ui 对话框模态属性

或其他方法是

$("*:not('#dialog')").on("click",function(){
// do focusing on button or anything you want...
return false;
})

4 回答 4