某人想要在点击链接的时候,弹出一个遮罩层。
本来想直接使用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层,并指定调用链接

open lightbox from inside an iframe

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{.external}的提醒)