Super-simple lightbox for hidden divs ?

Discussion in 'Web Design and Development' started by cube, May 14, 2010.

  1. cube macrumors G5

    Joined:
    May 10, 2004
    #1
    There are so many lightbox implementations that it is hard to choose one.

    I need just the modality, darkening, and at most a completely customizable close button and border. No fancy stuff hard to get rid of.

    The main requirement is that it must support that the content is in a hidden div.

    It should take care by itself of inserting a darkening div, if it needs one.

    Priority is given to browser compatibility.

    Thanks
     
  2. elppa macrumors 68040

    elppa

    Joined:
    Nov 26, 2003
    #2
    Not sure it fits all of your requirements, but it should be able to with a bit of tweaking:

    iBox

    Definitely does hidden divs though. Scroll down for and example.
     
  3. cube thread starter macrumors G5

    Joined:
    May 10, 2004
    #3
    Thanks. Maybe I should have clarified that I would like to know why I should choose it. I've already found long lists of alternatives that do not help much in making a choice.
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    They're all just clones doing essentially the same thing. Most are no better than others if the meet the need. I even have my own clone that I developed that I use on my site. You can check out this lightbox clone matrix, which list some things that may make you lean toward one over another.
     
  5. cube thread starter macrumors G5

    Joined:
    May 10, 2004
    #5
    I have tried several, and I still have to find one that works right.

    Which ones are not GPL and autocenter the lightbox?
     
  6. 7on macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #6
    HTML:
    <script>
    $(function(){
    	$('#button').click(function(){$('#overlay').show();$('#lightbox').show();return false;});
    });
    <script>
    <style>
    	#overlay{display:none;width:100%;height:100%;background:#000;position:absolute;top:0;left:0;
    	-moz-opacity:.50; filter:alpha(opacity=50); opacity:.50}
    	#lightbox{display:none;background:#fff;height:100px;width:100px;position:absolute;top:50%;left:50%;margin:-50px 0 0 -50px}
    </style>
    <body>
    	<div id="lightbox">OMG</div>
    	<div id="overlay"></div>
    	<a href="#" id="#button">OMG</a>
    </body>
    
    There you go, that'll be $100

    (dont forget to include good ole' jquery at the top)
     

Share This Page