Simple JavaScript/CSS Lightbox

 JavaScript Lightbox script

CSS Code:

body

{

    font-family:Verdana, Arial, Helvetica, sans-serif;

}

#outer

{

    display: none;

    position: absolute;

    top: 0;

    left: 0;

    width: 100‰;

    height: 100‰;

    background-color:#000000;

    z-index:1001;

    -moz-opacity: 0.7;

    opacity:.7;

    filter: alpha(opacity=70);

    padding:10px;

}

#inner

{

    display: none;

    position: fixed;

    top: 100px;

    left: 300px;

    width: 50‰;

    height: 50‰;

    padding: 5px;

    border: 10px solid #FF8000;

    background-color: white;

    z-index:1002;

    overflow: auto;

}

#content

{

    font-size:24px;

    color:#CCCCCC;

}

#close

{

    float:right;

    width:20px;

    height:20px;

    top:0;

    cursor:pointer;

    text-align:center;

    vertical-align:middle;

    font-weight:bold;

}

 

JavaScript Code:

function showId(id)

{

    var obj = document.getElementById(id);

    obj.style.display = 'block';

    return false;

}

function hideId(id)

{

    var obj = document.getElementById(id);

    obj.style.display = 'none';

    return false;

}

function showLightBox()

{

    showId('outer');

    showId('inner');

}

function hideLightbox()

{

    hideId('inner');

    hideId('outer');

}   

 

HTML Body Content:

<div id="outer"></div>

<div id="inner">

    <div id="close" onclick="hideLightbox()">X</div>

    <span id="content">Content Will Come Here</span>

</div>

<a href="javascript: void(0);" onclick="showLightBox();">Click Here</a> to view Lightbox