How do I make a pop up page like light box.

Posted on 2009-04-25
Last Modified: 2012-05-06
Lately I have noticed lots of sites using popups like: (Click on image)

Does anybody know what this effect is called and where there is a tutorial?
Question by:lwfuk
    LVL 42

    Expert Comment

    by:David S.
    I just call it LightBox. I suppose technically it's a kind of "modal dialog".

    Here's a newer version of that:

    You could also look at ThickBox ( which is very similar.

    As for tutorials, if the information on those pages isn't enough for you, I suggest you look for beginners materials for CSS and JavaScript.

    Author Comment

    I know all about light box. That's why I included the link.

    I am looking for a tutorial on how to create the popup effect in css/javascript.

    I want to take an html page and make it popup whilst masking out all of the surrounding stuff like they do in lightbox.

    Does anybody know what it is called and how to do it?
    LVL 42

    Expert Comment

    by:David S.
    Oh you want to learn how to make the different pieces of it yourself. Why didn't you say so?

    Why don't you just read through the code for those implementations?

    I know how to do it, but don't know a name for it other than "gray out the page and show a popup on top of it".

    Here's one way to gray out the page:

    Author Comment

    Kravimir: The demo doesn't do what lightbox does. I want the html page to pop-up and be displayed at full contrast whilst greying out the content underneath.
    LVL 42

    Expert Comment

    by:David S.
    That's the point. It's only part of the puzzle.

    Author Comment

    I need a solution - not a puzzle.

    Accepted Solution

    I researched the problem myself in the end and found the following solution. I modified the javascript and CSS to make a full screen popup. The effect is based on a full screen div element with alpha tranparency. See for the original script.


    Adrian Smith

    <title>Your Page Title</title>
    <!--You can just add some CSS code to the top of your page below the <head>, to make a CSS class in order to customize the look of the pop-up. -->
    <!--The part the code above of interest to you, is the 3rd line: filter:alpha(opacity=80);. This line makes the popup transparent with the opacity value set to 80-->
    <!--You can set the opacity within 0 - 100. If you set to 0, you won't see the popup. -->
    <style type="text/css">
    .transparent {
    	color: navy;
    	border: 1 red solid;
    <!--Add some JavaScript right below the CSS above. This code above uses only 2 functions, one to display the pop-up and another to hide the pop-up. -->
    /* this function shows the pop-up when
    user moves the mouse over the link */
    function Show()
    /* get the mouse left position */
    x = event.clientX + document.body.scrollLeft;
    /* get the mouse top position */
    y = event.clientY + document.body.scrollTop + 35;
    /* display the pop-up */"block";
    /* set the pop-up's left */
    // = x; = 0;
    /* set the pop-up's top */
    // = y; = 0;
    /* this function hides the pop-up when
    user moves the mouse out of the link */
    function Hide()
    /* hide the pop-up */"none";
    <body bgcolor="#FFFFFF" text="#000000">
    <!--The last part is placing the function into the body of the page-->
    <a href="" onMouseOut="Hide()" onMouseOver="Show()" onMouseMove="Show()">Move the mouse over here</a><br>
    Move your move over the link above and the pop-up appears. And the pop-up<br>
    follows your mouse as long as your mouse is still over the link.
    <div id="Popup" class="transparent">
      <div style="background-color:#C3FDB8"> <b>Title goes here</b></div>
      <div>Description goes here</div>

    Open in new window


    Author Comment

    Sorry - I wished to select my own solution and I didn't want to cancel the question.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now