SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Using Lightbox in popup

    hey folks,
    i been working with lightbox for galleries on websites, i saw on many sides. that a part of form asking your email address/loading a small form type thing for inputing/submitting data. now i m working on a web site which got pop up. i want them to open in lightbox. how can i do that? is it possible?
    All those who wander aren't lost.

  2. #2
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could either have the lightbox pre-filled and simply display it when certain events are triggered, or open an empty lightbox and populate it on the fly

  3. #3
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    a couple would be helpful
    All those who wander aren't lost.

  4. #4
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you clarify your point? What do you mean? It might be easier if you provided a working code example....

  5. #5
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    a example (not excatly what i have in mind) is facebook popup. take a example. when you remove a friend or try to delete your status a popup comes up. static is position but does the work. that sort of
    All those who wander aren't lost.

  6. #6
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the content of the lightbox is always the same (email feedback form) , and the form is small, then I suggest that you have all the html elements of the lightbox generated on page load and placed in a div container that has display:none. Clicking on a button will set the container to display:block.

  7. #7
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    a simple example would be helpful
    All those who wander aren't lost.

  8. #8
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, was away on a long weekend, so only got to your response a few minutes ago. You will find below a very simple code example that does more or less what you are describing:

    <html>
    <head>
    <style>
    input#showBox {
    position:relative;
    top:10px;
    left:20px;
    }

    div#lightbox {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    overflow:hidden;
    display:none;
    }

    div#lightbox div#lightbox_bg {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background:#000000;
    opacity:0.8;
    -ms-filter:'progid: DXImageTransform.Microsoft.BasicImage(opacity=0.8)';
    filter: progid: DXImageTransform.Microsoft.BasicImage(opacity=0.8);
    }

    div#lightbox div#lightbox_fg {
    position:absolute;
    top:100px;
    left:100px;
    width:300px;
    height:300px;
    background:#ffffff;
    border:solid thin #b9a1a1;
    }
    </style>
    </head>
    <body>
    <input type="button" value="Show Form" onclick="lightbox.show();" id="showBox">
    <div id="lightbox">
    <div id="lightbox_bg"></div>
    <div id="lightbox_fg">
    <input type="button" value="Hide Form" onclick="lightbox.hide();">
    <form>
    <label for="field1">First Field: </label><input type="text" id="field1"><br />
    <label for="field2">Second Field: </label><input type="text" id="field2"><br />
    <label for="field3">Third Field: </label><input type="text" id="field3">
    </form>
    </div>
    </div>
    <script>
    var lightbox = {
    show: function() {
    document.getElementById('lightbox').style.display = 'block';
    },
    hide: function() {
    document.getElementById('lightbox').style.display = 'none';
    }
    }
    </script>
    </body>
    </html>


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •