Op deze pagina staat integraal de broncode van deze lightbox-pagina. Er valt weinig uit te leggen en de code spreekt voor zichzelf. Klik even op de eerste lightbox-link om het effect van deze procedure te zien. Om nog wat extra voorbeeld-code te genereren is er nog een tweede lightbox aangemaakt.

integrale code van de lightbox-pagina


<!DOCTYPE html><html lang="nl">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>lightbox puur css</title>
<meta name="keywords" content="lightbox" />
<meta name="description" content="ultrasnelle en foutloze lightbox. met puur CSS maak je deze (makkelijke) lightbox." />
<meta name="author" content="Bobik" />
<meta name="robots" content="noimageclick" />
<style type="text/css">
        html,body{ 
                height:100%; 
                margin:0; 
                padding:0}
        #pagina-container{
                width:100%;
                height:100%;
                position:absolute;
                overflow:auto;
                top:0;
                left:0}
        #lightbox{
                width:100%;
                height:100%;
                margin:0;
                padding:0;
                list-style-type:none;
                overflow:auto;
                text-align:left}
        #lightbox li{
                width:100%;
                height:3000px;
                position:relative;
                background:rgba(0,0,0,.5)}
        #lightbox .box{
                width:400px;
                height:400px;
                margin:0 auto;
                top:50px;
                border:10px solid #999;
                background-color:#fff;
                padding:20px;
                position:relative;
                z-index:1}
        #lightbox #sluiten{
                background-color:transparent;
                z-index:-1}
        body{
                text-align:center}
        #header,#content{
                text-align:left;
                width:100%;
                margin:0 auto;
                padding:0 8px 0 8px}
        #lightbox h3{
                font-weight:normal;
                font-size:1.8461em;
                margin:0 0 0.4583em 0}
        #lightbox a.sluiten{
                float:right;
                display:block;
                width:40px;
                line-height:35px;
                text-align:center;
                background-color:#ddd;
                text-decoration:none;
                font-weight:bold;
                color:#999}
        #lightbox a.sluiten:hover{
                background-color:#888;
                color:#fff}
</style>
<!--[if lt IE 9]>
        <style type="text/css">
                html{
                        overflow-y:auto}
                #lightbox{
                position:relative;
                        overflow:hidden;} 
                #lightbox .achtergrond{
                        background:#000;
                        position:absolute;
                        width:100%;
                        height:3000px;
                        filter:alpha(opacity=75);
                        top:0;
                        left:0}
        </style>
<![endif]-->
</head>
<body style="font-family:sans-serif">
<div id="pagina-container">
        <div id="header">
                <h1>KOMPOOS.NL</h1>
                <h2>lightbox - CSS</h2>
                <h3><a href="/">home</a> » <a href="/css/">css</a> » <a href="/css/lightbox.html">lightbox.html</a></h3>
                <p><strong><em><a href="/site-map.html">sitemap</a></em></strong></p>
                <hr />
                <h4>lightbox procedure</h4>
        </div>
        <div id="content">
                <p>
                        Op deze pagina staat integraal de broncode van deze lightbox-pagina. Er valt weinig uit te leggen en 
                        de code spreekt voor zichzelf. Klik even op <a href="#lightbox-1">de eerste lightbox-link</a> om het effect van deze 
                        procedure te zien. Om nog wat extra voorbeeld-code te genereren is er nog een <a href="#lightbox-2">tweede lightbox</a>  
                        aangemaakt.
                </p>
                <h4>integrale code van de lightbox-pagina</h4>
        </div>
</div>
<ul id="lightbox">
        <li id="sluiten"></li>
        <li id="lightbox-1">
                <div class="box">
                        <a href="#sluiten" class="sluiten" title="sluit lightbox">X</a>        
                        <h3>snel safe en zonder script(s)</h3>
                        <p>
                                Cross browser (dus ook in Opera..) en met valide code. 
                                Geen kruimeltje script is nodig om deze 
                                lightboxen te gebruiken...
                        </p>
                </div>
                <!--[if lt IE 9]>
                        <div class="achtergrond"></div>          
                <![endif]--> 
        </li>
        <li id="lightbox-2">
                <div class="box">
                        <a href="#sluiten" class="sluiten" title="sluit lightbox">X</a>
                        <h3>zoekmachine vriendelijke lightbox</h3>
                        <p>
                                De tekst in de lightbox is makkelijk te doorzoeken door 
                                de zoekmachine-robots. Omdat er geen script(s) worden gebruikt 
                                is de tekst makkelijker te "lezen".
                        </p>
                </div>
                <!--[if lt IE 9]>
                        <div class="achtergrond"></div>          
                <![endif]--> 
        </li>
</ul>
</body></html>