简体   繁体   中英

how to disable all the clicks made by the user if click is made outside the modal dialog

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

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.

Your dialog is placed over this transparent div.

frameworks like jQuery do this for you, so you don't have to worry about getting the js right.

Take a look at jQuery modal dialog .

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.

Here is a simple implementation with no dependencies : http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/

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.

the pseudo code will be like:

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

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

or other way to do is

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM