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.

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.