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

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

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

演示

 

 

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