CSS Only Lightbox

lightbox.css

#lightbox-overlay{
            display: none;
            position:fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background-color: black;
            background-color: rgba(0,0,0,0.8);
            z-index:9998;
        }

        #lightbox-content {
            display:none;
            position:static;
            margin:100px auto;
            width:480px;
            height:600px;
            padding:16px;
            border:1px solid #ccc;
            background-color:white;
            z-index:9999;
            overflow:none;
        }

        #lightbox-content iframe {
        	width:100%;
        	height:100%;
        	overflow:none;
        }

lightbox.htm

<p><a href="#" onclick="showLightbox(); return false;">hello world<a></p>

<div id="lightbox-overlay" onclick="hideLightbox();">
	<div id="lightbox-content">
		<iframe src="http://news.bbc.co.uk"></iframe>
	</div>
</div>

lightbox.js

//May want to remove this at some stage

function showLightbox() {
     document.getElementById('lightbox-overlay').style.display='block';
     document.getElementById('lightbox-content').style.display='block';
}

function hideLightbox() {
     document.getElementById('lightbox-overlay').style.display='none';
     document.getElementById('lightbox-content').style.display='none';
}