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.

Advertisements

Lost In Translation

It is an old movie, and I watched it quite some time back. Was talking to a friend yesterday about some movies, and I thought of watching this one again, and I did watch it today.

I get carried away in the emotions of the characters, and I don’t know if that is good or bad. As I watched the last scene of the movie, I felt like I was losing someone I never even met, and nostalgic. Uhh! Exaggeration? No. I felt it, and I’m writing it down here. 🙂 I don’t know if that makes any sense.

It’s a nice movie. At least it is of a type I like.

Vacations!

This Thursday, I’m going home. Obviously, it is going to be a long weekend as 2 days of off adds to the weekend, but you know, it doesn’t last long, don’t know if the clock in the mind thinks that way.

Every time I hear someone say “Time flies! ” or when I feel that for myself, the general notion I get is “Who runs the clock against our wish either too fast, or too slow?!” Even when the “seconds” needle in the wall clock is driving up against the gravitation, or when the “minutes” needle is holding on to its position for a minute, they keep their pace. I wonder how time manages to fly yet, sometimes, again, not always.

Anyways, done with the preamble 🙂

Plans don’t really workout well, but, I’m going home keeping some in mind. Gotta see how they turn out. If they start to work well, I wish time doesn’t fly so that I can finish up things, otherwise, you know, you got it!

Just to add, this week has been very nice so far. Which means, time, probably, did fly! 😉