CODEWITHSUNDEEP
javascriptasp.netmodal-dialog
Vishweshwar Kapse
Vishweshwar Kapse

Reputation: 939

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

in my current project i am opening a modal dialog that opens on click of a button, now if the user clicks anywhere outside the modal dialog the click should be ignored by the browser and the modal dialog should get focused, how can this be achieved?

Upvotes: 3

Views: 3925

Answers (4)

Vishal Sharma
Vishal Sharma

Reputation: 2803

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;
})

Upvotes: 0

Th3Nic3Guy
Th3Nic3Guy

Reputation: 1979

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>

Upvotes: 0

nunespascal
nunespascal

Reputation: 17724

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.

Upvotes: 3

Nick Andriopoulos
Nick Andriopoulos

Reputation: 10643

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/

Upvotes: 2

Related Questions