Simple lightBox with css and javascript

I guess you’ve seen many variations of lightbox effect online by now. There are lightboxes way over too complicated, requiring many files, images and resources, others are even not for free, but how about one simple and easy to use solution?

Actually you don’t need much to make your own lightBox effect:

– buttons from where the lightBoxes effect will be triggered
– containers to display something new on the page
– div tag for the black overlay (or white)

Screenshot of lightbox effect

Imaging somebody clicks on a link – that link has event listener that changes display property from none to block (or the other way around). You change the display property of two elements which before that are display: none. One of those elements is actually the box where you display whatever content you want to display, the other one is a div used to make the dim effect on the rest of the page. The style for the content box could have some positioning properties, but it’s a good idea to add a fancy background and border, to make it stand out. The div for the dim effect is wrapped in another anchor, where we have JavaScript to revert back display to none. Probably you’ve seen in some lightBox effects a (X) image on a corner, which serves exactly that function – closing the overlay. I’ve considered that it’s too little as clickable area and made it work through the entire dim area. When you get that concept in mind, you will understand very easily how the code works exactly. I’ve added plenty of comments to assist you through the way.

DEMO | DOWNLOAD

It’s all html and jQuery! You would have to add tons of ids in your markup if you would try to use pure JavaScript. Previously that was the way I had my code, buy I had to use extra markup and make 3 more divs for the black-overlay, every new div with a different id. It was just a total mess. Also, using onclick=”” in your html, or href=”javascript:void(0) hides security risks.

9 Comments

  1. Yass

    Hi there. Thank you so much for taking your time, not only to improve and add more to it, but also for your time to explain in so much detail what you were doing and wanted to achieve.

    I do have a question, and I hope you can help me. I have follow step by step what you have posted here, but when I click ont he link to open the lightbox message, it doesn’t do anything. I basically copied and paste what you have in this tutorial and I downloaded the style file you provided as well.

    I think because I have some of the codes from the original tutorial, might be affecting this codes to work. Could it be?

  2. menian

    Hm, strange. Can you try by following the tutorial step by step, instead of taking the ready solution from the end? What’s important is that you have some content in light1 and light2 – that are the hidden div tags, which hold the content you want to be displayed on click of a link.
    If you can’t make it – contact me on skype. My skype username is in the Contacts page.
    Good luck!

  3. jsk

    can you tell me if there is a way to pop up a separate web page in the popup box? any tips would be greatly appreciated. I need to use non-java code and this is perfect except for this thing that I can’t figure out. any tips are greatly appreciated.

  4. summsel

    Hey Menian, i like you Lightbox!
    I got just one question: you gave span.white-box top:25%;
    If you have a longer website (with vertical scrollbars) you have to scroll up to see the content of the lightbox.
    Can you provide a solution, how to center the lightbox – regardless of the window height?
    thx 🙂

    1. Yasen Vasilev

      Dear Summsel!
      You are damn right that it’s not visible. I’m really sorry for not testing it better. The issue was that the span.white-box has position: absolute instead of fixed. Now I’ve changed it and updated the code. I thought it could be an issue on small screens, but tested it quickly and it looks fine there as well.

      Thank you once again for pointing this error to me. Cheers!

Leave a Reply

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