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

Featherlight 弹窗插件示例

最新推荐文章于 2021-03-18 22:35:38 发布

最新推荐文章于 2021-03-18 22:35:38 发布 · 343 阅读

文章标签：

#javascript #ViewUI

本文介绍了一个名为 Featherlight 的 jQuery 弹窗插件，它支持多种类型的弹窗，包括默认样式、自定义样式、图片、iFrame 和通过 AJAX 加载的内容。这些功能使得 Featherlight 成为一个灵活且易于定制的轻量级解决方案。

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

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

演示

   XML/HTML Code
  

   <div class="container">  
            <div class="jumbotron">  
                  
<div class="btn-group">  
        <a class="btn btn-default" href="#" data-featherlight="#fl1">Default</a>  
        <a class="btn btn-default" href="#" data-featherlight="#fl2" data-featherlight-variant="fixwidth">Custom Styles</a>  
        <a class="btn btn-default" href="http://www.freejs.net/images/logo.png" data-featherlight="image">Image</a>  
        <a class="btn btn-default" href="#" data-featherlight="#fl3">iFrame</a>  
        <a class="btn btn-default" href="index.html .ajaxcontent" data-featherlight="ajax">Ajax</a>  
      </div>  
            </div>  
            <div class="row marketing text-center"></div>  
        </div>  
  
        <div class="lightbox" id="fl1">  
            <h2>Featherlight Default</h2>  
            <p>  
                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.  
            </p>  
        </div>  
  
        <div class="lightbox" id="fl2">  
            <h2>Featherlight with custom styles</h2>  
            <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>  
            </p>  
        </div>  
  
        <iframe class="lightbox" src="http://www.freejs.net/" width="500" height="281" id="fl3" style="border:none;" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>  
  
        <div class="ajaxcontent lightbox">  
            <h2>This Ligthbox was loaded using ajax</h2>  
            <p>With little code, you can build lightboxes that use custom content loaded with ajax...</p>  
        </div>  

  