某人想要在点击链接的时候,弹出一个遮罩层。
本来想直接使用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)" οnclick="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)" οnclick="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;}