如果在模态对话框外单击，则如何禁用用户所做的所有单击

Question

在我当前的项目中，我打开一个单击按钮打开的模态对话框，现在如果用户单击模态对话框外的任何位置，浏览器应忽略单击，模式对话框应该集中，如何实现？

Answer 1

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

您的对话框放在此透明div上。

像jQuery这样的框架为你做这个，所以你不必担心让js正确。

看看jQuery模式对话框。

Answer 2

结帐模式对话框和相关技术。 假设您使用jQuery UI作为对话框，则内置该选项。如果没有，您可以检查它们的实现。

Answer 3

有一个名为onblur的文档或窗口的事件，基本上你想要设置一个函数，当用户点击其他窗口时，它会将窗口的焦点恢复到弹出窗口。

伪代码将如下：

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

Answer 4

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

或其他方式

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