Simple JavaScript/CSS Lightbox
In number of web applications we need JavasScript Lightbox and there are number of JavaScript libraries online which can be downloaded and used.
Here is one simple JavaScript Lightbox script which we just need to copy and paste
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
may this will help you