CSS Popup Box With Background Disabled

It is my curiosity to right mouse click on a web page, and click “Inspect” that comes with Firebug every time I find a web page catchy. I’ve been trying to have a CSS pop up box that forces some type of confirmation, and while the question asked in the pop up isn’t answered, I wanted to have the parent background disabled (ie. no anchor links from the parent should be active/clickable)

I’d some options in mind, but I was unhappy with them as they seem to be inelegant. So, I went on to analyze how it is done on some of the websites. For instance, on Facebook here is what they seem to be doing as of this moment, the way I understand.

Say you wrote something in the “Update Status”, but clicked on something else. You are likely to see a pop up that asks whether you are sure about navigating away from the page.

popup

The pop up that you see will have the following CSS rules.

.generic_dialog_modal, .generic_dialog_fixed_overflow {
    background-color: rgba(252, 252, 252, 0.9);
    height: 100%;
    z-index: 400;
}
.generic_dialog {
    left: 0;
    outline: medium none;
    overflow: visible;
    position: fixed;
    top: 0;
    width: 100%;
}

As z-index of this div that encloses the pop up div is 400 (must be the highest among all the elements), height being 100%, top being 0, position being fixed, the popup occupies the entire page on top of the any other element on the page.

If you want to find a way to click the links/images on the apparently disabled background, then just go on reducing the z-index using firebug, and you will notice that the right chat/update dock box+graph search portion opens up first, then the rest of the page become visible and the links becomes active, and dialogue box disappears when z-index is less than 0.

So, this seems to be one elegant and simple way to have a CSS pop up, with disabled/diminished background.🙂

I hope this post is helpful.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s