I.e

  1. dimming (assuming background-color = black and opacity = 0.5, for example)
  2. The picture that appears is not darkened, but lies as if in a layer on top of the body.

Example: http://leandrovieira.com/projects/jquery/lightbox/

Thank.

  • + this is probably implemented using position :) - Undefined

1 answer 1

Do not think right.

Some div element with properties is created (will serve as a dimming substrate):

position: fixed; width:100%; height: 100%; top:0; left:0; background: rgba(0,0,0,.5); z-index:10;

A handler is hung on this div that closes the view.

A second element is created that will serve as a container for pictures. In css styles exhibited type:

 position: absolute; left: 50%; z-index:20;

And in javascript (jQuery):

 $('img').click(function() { $('.lightbox').css({ 'width':this.width, 'margin-left':'-'+(this.width/2), 'height': this.height }).find('img').attr('href', this.src); });

Something like this.