How to create Javascript and CSS popup with Lightbox effect


This tutorial helps you to create an lightbox effect using css.


The link with onclick attribute launches the popup window.

Fade is the background layer for the lightbox what makes the whole window dark.

Light is the container where you can place your HTML code, text, image anything you want to display.


Checkes if any key pressed. If ESC key pressed it calls the lightbox_close() function.

This script makes light and fade divs visible by setting their display properties to block. Also it scrolls  the browser to top of the page to make sure, the popup will be on middle of the screen.

This makes light and fade divs invisible by setting their display properties to none.

To place light div to middle of the screen, make sure you set margin-left to half of width (300/2=150), and margin-top to half of height (200/2=100).

If you can not see the fade, light divs on your website, try to set a higher z-index. Don’t forget, that light div needs higher z-index than fade to put it on front.


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">