How to make a light box type pop up on your website

While javascript pop-ups are sufficient for most situations in which we have to pass a little information to the client, they are very inflexible.

They are inflexible in terms of customization. We can't add colors, images, buttons or any other kind of design modifications. In such situations, HTML elements designed to look like pop-ups do the job. People normally call them light-box type pop-ups, probably because they normally come with a translucent background. 

Here is how to make one for you website. Unlike my previous tutorials, this tutorial does not feature a working example right here. Instead you can view the working example on this link: 

http://www.welkin.ws/tutorials/lightbox/lightbox-tutorial.html

What it does:

1. There is a button on this page
2. Use click the button and the popup appears
3. There is an image in this pop-up. Alternatively, there can be text or any other kind of HTML content placed here too. 

The first step into making this is the HTML part, which is as following:

1. <div id="shekhoolbcontainer" align="center" onclick="this.style.visibility='hidden'">
2. <div id="shekhoolb">
3.      <img src="mindzip-invite-small.jpg" />
4.     </div>
5. </div>

The above code defines the lightbox. It does not contain the button which makes it appear. The code of the button is as follows:

1. <button onclick="document.getElementById('shekhoolbcontainer').style.visibility='visible'">SHOW LIGHTBOX</button>

The important part of this button code is the onclick attribute, which selects the lightbox container element by id and toggles its visibility.

The CSS is as follows:

1. #shekhoolbcontainer
2. {
3. width:100%;
4. height:100%;
5. position:absolute;
6. top:0px;
7. left:0px;
8. visibility:hidden;
9. z-index:+999;
10. background-image:url(lb-bg-image.png);
11. display:block;
12. }
13. #shekhoolb
14. {
15. background-color:#FFF;
16. width:100%;
17. height:95%;
18. padding-top:2%;
19. }

If you have any doubts about the whole structure of the program, you can look at the file. I have pasted the link above.