how to avoid user to click outside popup window javascript?

Question

How to avoid user to click outside popup window javascript ?

• Linus Kleen: Wow. I love the details. Could you please rephrase?
• jwueller: @goreSplatter: I had to laugh :-D

Answer 1

If you want to avoid clicking of the content you can place a div with a fixed position over all the content. That prevents the user from clicking on everything that is not inside this div. I use this for some error reporting on a site.

Html:

<div id="error_wrapper">
 <div id="site_error">
 Error:
 </div>
</div>

Css:

div#error_wrapper {
 position: fixed;
 width: 100%;
 height: 100%;
 background-color: #000000;
 top: 0px;
 left: 0px;
 opacity: 0.7;
 filter: alpha(opacity=70);
}
div#site_error {
 position: fixed;
 top: 200px;
 width: 400px;
 left: 50%;
 margin-left: -200px;
}

• subhaze: +1 for not going straight to a framework. Simple demo based on your HTML/CSS: jsfiddle.net/subhaze/2CrX5

Answer 2

I think you're asking about a modal dialog box. If so, have a look at the jQuery UI modal dialog.

It will open up a dialog box with custom HTML content, and the rest of the page will be grayed-out and un-clickable. Is that what you want?

Answer 3

If you meant to ask "can you prevent users from clicking outside a popup window", no, you can't. At least not with JavaScript. Just imagine how annoying that would be.

You need "deeper" access to the browser than what a bunch of JavaScript sitting on a webpage has in order to do this.

Answer 4

Just make a popup div follow the cursor with a mousemoveevent! I can see some flaws with the method, though.