用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)" onclick="showlightbox('ranqi.html')">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)" onclick="closelightbox()"><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;}
或者使用shadowbox来实现（感谢scriptlover的提醒）
04/09/2009 at 17:10
回复
04/10/2009 at 21:51
原来这叫做lightbox
回复
06/23/2009 at 11:57
这个东东，早就知道了。现在jquery的灯箱效果不错。
回复
06/23/2009 at 14:41
这个效果在内容不超过一屏下，正常，可当内容超出一屏后，并且链接在页面底部时，就会发现问题了，可以试试
回复