Question

I am having a page that at some point shows a hidden div and adds a form for inputing some data. You can call it a modal div perhaps.

What I want to do is to grey out everything else and only allow interaction with the mentioned div. I want the background to be grey and transparent.

What is the best strategy for this? Adding a image and stretching it in some way and making it transparent? Is it possible to make that image catch all events that ends up outside my form-div? How to do this?

Any other, better way?

I am using jquery so best way is if I can se any jquery api for this.

Answer 1

You can do this by using a Modal jQuery Dialog. It will grey out the background and disable editing on the page except for the dialog.