用lightbox点亮html
某人想要在点击链接的时候，弹出一个遮罩层。本来想直接使用lightbox来实现，但是该效果只能调用一张图片，而不能调用一个html，无奈自己写了一份。大家可以点击这里查看演示效果
实现方法
1.添加如下javascript:
function showlightbox(ShowUrl) { document.getElementById('lightbox-content').style.display='block'; document.getElementById('lightbox-bg').style.display='block'; if(ShowUrl!='') { document.getElementById('lightbox-iframe').src=ShowUrl; } } function closelightbox() { document.getElementById('lightbox-content').style.display='none'; document.getElementById('lightbox-bg').style.display='none'; document.getElementById('lightbox-iframe').src='about:blank'; } 2.在页面内添加一个iframe层，并指定调用链接
<a href="javascript:void(0)" >open lightbox from inside an iframe</a> <!--lightbox--> <div id="lightbox-bg"></div> <div id="lightbox-content"> <iframe id="lightbox-iframe" width="100%" frameborder="0" scrolling="no" src="about:blank" height="100%" ></iframe> <p><a href="javascript:void(0)" ><img src="images/closelabel.gif" border="0"/></a></p> </div> 3.写点样式
#lightbox-content{position:absolute;height:370px;width:470px;margin:-250px 0px 0px -250px;top: 50%;left: 50%;text-align: right;background-color: #FFF;border: 1px solid #000;display:none;z-index:100;overflow:hidden;padding:10px 10px 40px 10px;} #lightbox-content p{ margin-top:8px;} #lightbox-bg{position:absolute;top:0;left:0;z-index: 90;background:#000;display:none;width:100%;height:100%;_height:2000px;filter:alpha(opacity=70);-moz-opacity:0.6;opacity:0.6;}
页:
[1]