用lightbox点亮html

某人想要在点击链接的时候,弹出一个遮罩层。
本来想直接使用lightbox来实现,但是该效果只能调用一张图片,而不能调用一个html,无奈自己写了一份。大家可以点击这里查看演示效果

实现方法

1.添加如下javascript:

  1. function showlightbox(ShowUrl)
  2. {
  3. document.getElementById('lightbox-content').style.display='block';
  4. document.getElementById('lightbox-bg').style.display='block';
  5. if(ShowUrl!='')
  6. {
  7. document.getElementById('lightbox-iframe').src=ShowUrl;
  8. }
  9. }
  10. function closelightbox()
  11. {
  12. document.getElementById('lightbox-content').style.display='none';
  13. document.getElementById('lightbox-bg').style.display='none';
  14. document.getElementById('lightbox-iframe').src='about:blank';
  15. }

2.在页面内添加一个iframe层,并指定调用链接

  1. <a href="javascript:void(0)" onclick="showlightbox('ranqi.html')">open lightbox from inside an iframe</a>
  2.  
  3. <!--lightbox-->
  4. <div id="lightbox-bg"></div>
  5. <div id="lightbox-content">
  6.     <iframe id="lightbox-iframe" width="100%" frameborder="0" scrolling="no" src="about:blank" height="100%" ></iframe>   
  7.     <p><a href="javascript:void(0)" onclick="closelightbox()"><img src="images/closelabel.gif" border="0"/></a></p>
  8. </div>

3.写点样式

  1. #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;}
  2. #lightbox-content p{ margin-top:8px;}
  3. #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的提醒)

崔凯博客
Powered by WordPress | Theme by ck web design | TOP 顶部
Copyright © 崔凯 All rights reserved. 蜀ICP备12025891号.