如果在模态对话框外单击，则如何禁用用户所做的所有单击
[英]how to disable all the clicks made by the user if click is made outside the modal dialog
问题描述
在我当前的项目中，我打开一个单击按钮打开的模态对话框，现在如果用户单击模态对话框外的任何位置，浏览器应忽略单击，模式对话框应该集中，如何实现？
4 个解决方案
解决方案1
3 已采纳 2013-03-12 08:22:14
The standard way to disable clicks to the background when showing a modal dialog is to create a (semi)transparent div(with a background image) and use that to intercept all clicks. 
在显示模式对话框时禁用单击背景的标准方法是创建（半）透明div（带有背景图像）并使用它来拦截所有点击。
Your dialog is placed over this transparent div. 您的对话框放在此透明div上。
frameworks like jQuery do this for you, so you don't have to worry about getting the js right. 像jQuery这样的框架为你做这个，所以你不必担心让js正确。
Take a look at jQuery modal dialog . 看看jQuery模式对话框 。
解决方案2
1 2013-03-12 08:11:45
Checkout modal dialogs and related techniques. 结帐模式对话框和相关技术。 Assuming you use jQuery UI for dialogs, that option is built in. If not, you can checkout their implementation of it. 假设您使用jQuery UI作为对话框，则内置该选项。如果没有，您可以检查它们的实现。
Here is a simple implementation with no dependencies : http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/ 这是一个没有依赖关系的简单实现： http ： //raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/
解决方案3
0 2013-03-12 08:23:49
there is a event for the document or window called onblur basically you want to set a function which will bring the focus of the window back to your pop up in case the user clicks on some other window. 有一个名为onblur的文档或窗口的事件，基本上你想要设置一个函数，当用户点击其他窗口时，它会将窗口的焦点恢复到弹出窗口。
the pseudo code will be like: 伪代码将如下：
<script>
function bringBackFocus()
{
window.focus();
}
</script>
<body onBlur="bringBackFocus()">
</body>
解决方案4
0 2013-03-12 08:44:23
in jqueryui dialog there is a property you will find named Modal set its to true it will disable all contents except dialog Jquery Ui Dialog Modal Property 在jqueryui对话框中有一个属性，你会发现名为Modal将其设置为true它将禁用除对话框之外的所有内容Jquery Ui Dialog Modal Property
or other way to do is 或其他方式
$("*:not('#dialog')").on("click",function(){
// do focusing on button or anything you want...
return false;
})
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.