CODEWITHSUNDEEP
javascriptjqueryhtmlcssmodal-dialog
Nicsoft
Nicsoft

Reputation: 3712

Change background colour and transparency when adding a "modal div"

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.

Upvotes: 0

Views: 4930

Answers (3)

Joseph Marikle
Joseph Marikle

Reputation: 78550

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.

Upvotes: 2

CAbbott
CAbbott

Reputation: 8098

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.

Upvotes: 1

Sjoerd
Sjoerd

Reputation: 75619

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

Upvotes: 0

Related Questions