用lightbox点亮html

最新推荐文章于 2025-04-27 14:29:13 发布

原创最新推荐文章于 2025-04-27 14:29:13 发布 · 238 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #JavaScript #ViewUI

js 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了一种自定义lightbox的方法，通过简单的JavaScript代码和HTML结构，实现了点击链接后弹出遮罩层并加载指定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;}