多种弹出窗口,弹出层,包括ajax,图片等载入

多种弹出窗口,弹出层,包括ajax,图片等载入

 本例用到的css和js文件请到演示页面查看源码获取

多种弹出窗口,弹出层,包括ajax,图片等载入

 

 

XML/HTML Code
  1. <div class="container">  
  2.             <div class="jumbotron">  
  3.                   
  4. <div class="btn-group">  
  5.         <a class="btn btn-default" href="#" data-featherlight="#fl1">Default</a>  
  6.         <a class="btn btn-default" href="#" data-featherlight="#fl2" data-featherlight-variant="fixwidth">Custom Styles</a>  
  7.         <a class="btn btn-default" href="http://www.freejs.net/images/logo.png" data-featherlight="image">Image</a>  
  8.         <a class="btn btn-default" href="#" data-featherlight="#fl3">iFrame</a>  
  9.         <a class="btn btn-default" href="index.html .ajaxcontent" data-featherlight="ajax">Ajax</a>  
  10.       </div>  
  11.             </div>  
  12.             <div class="row marketing text-center"></div>  
  13.         </div>  
  14.   
  15.         <div class="lightbox" id="fl1">  
  16.             <h2>Featherlight Default</h2>  
  17.             <p>  
  18.                 This is a default featherlight lightbox. It's flexible in height and width. Everything that is used to display and style the box can be found in the featherlight.css file which is pretty simple.  
  19.             </p>  
  20.         </div>  
  21.   
  22.         <div class="lightbox" id="fl2">  
  23.             <h2>Featherlight with custom styles</h2>  
  24.             <p>It's easy to override the styling of Featherlight. All you need to do is specify an additional class in the data-featherlight-variant of the triggering element. This class will be added and you can then override everything. You can also reset all CSS: <em>$('.special').featherlight({ resetCss: true });</em>  
  25.             </p>  
  26.         </div>  
  27.   
  28.         <iframe class="lightbox" src="http://www.freejs.net/" width="500" height="281" id="fl3" style="border:none;" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>  
  29.   
  30.         <div class="ajaxcontent lightbox">  
  31.             <h2>This Ligthbox was loaded using ajax</h2>  
  32.             <p>With little code, you can build lightboxes that use custom content loaded with ajax...</p>  
  33.         </div>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_171.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值