添加“模态div”时更改背景颜色和透明度

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

This is actually not that complicated. It can be done in a line or two:

/* initialize it */
$(document.body).append("<div id='shadow' style='position:fixed;left:0px;top:0px;width:100%; height:100%; background:black;'></div>").find("#shadow").hide();

/* show it */
$("#shadow").fadeTo(200,0.5);

/* hide it */
$("#shadow").fadeTo(200,0);

then just make sure to set the form to a z-index higher than the shadow.

Answer 2

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.

Answer 3

Make a div overlap the whole page. That div is 50% transparent and grey. Then your modal div comes on top of that.

More info: Snippets: Howto Grey-Out The Screen