CODEWITHSUNDEEP
javascripthtmlcss
Terry Li
Terry Li

Reputation: 17268

How to get this kind of web page effect

enter image description here

  1. The little popup window appears in the middle of the original page.

  2. The original page is covered by grey shade if not by the popup window.

  3. The underneath original page can still be scrolled up and down.

Upvotes: 0

Views: 338

Answers (5)

semir.babajic
semir.babajic

Reputation: 741

Follow these steps:

1) Create this CSS rule:

.overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.5;
  background: #666;
  filter: alpha(opacity=50); /* opacity for IE browsers */ 
}

2) Add this code to your jQuery:

$("body").prepend("<div class='overlay'></div>");

3) When done, remove it like this:

$(".overlay").remove();

Didn't test this, but it should work (maybe with very minor modifications). This is one way, if you prefer doing it by yourself. You can, however, use existing solutions such as Twitter's Bootstrap lib which is cool, and I recommend it.

http://twitter.github.com/bootstrap/

Regards.

Upvotes: 3

Ian Atkin
Ian Atkin

Reputation: 6346

This is easy enough to achieve with some simple CSS...

The overlay (the grey background) is fixed in place and covers everything below:

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: 2; // above content
}

The "dialog" itself is similar in style, but smaller:

#dialog {
    display: none;
    position: fixed;
    width: 500px;
    height: 250px;
    background-color: #fff;
    z-index: 3; // above 'overlay'
}

The top and left attributes can be calculated with simple JavaScript, so that the dialog can be positioned in the center of the browser:

positionDialog = function() {
    if (typeof window.innerHeight != 'undefined') {
        dialog.top = parseInt(window.innerHeight / 2) - dialog.height;
        dialog.left = parseInt(window.innerWidth / 2) - dialog.height;
    }
}

And also upon window resize:

$(window).resize(function() {
    positionDialog();
}

Notice how the CSS sets these DIVs to display: none. They are hidden until called, which is done by setting them to display: block.

These days, I find that it's much simpler and more robust to rely on jQuery UI's excellent dialog widget.

Upvotes: 2

E. B. Berg
E. B. Berg

Reputation: 386

You could take a look at the modal included in Twitter Bootstrap: http://twitter.github.com/bootstrap/javascript.html#modals

Upvotes: 0

sdespont
sdespont

Reputation: 14025

You could use the JQueryUI dialog widget http://jqueryui.com/dialog/#modal

Upvotes: 2

Alex W
Alex W

Reputation: 38173

It's called a light box. There's a way that you can do it using only CSS:

http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

The key for darkening the background is the CSS opacity property of a box that you cover the background with, which you can set a black background and use this CSS for transparency:

-moz-opacity: 0.8;
opacity:.80;

Upvotes: 1

Related Questions