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

多种弹出窗口，弹出层，包括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">Defaulta>
        <a class="btn btn-default" href="#" data-featherlight="#fl2" data-featherlight-variant="fixwidth">Custom Stylesa>
        <a class="btn btn-default" href="http://www.freejs.net/images/logo.png" data-featherlight="image">Imagea>
        <a class="btn btn-default" href="#" data-featherlight="#fl3">iFramea>
        <a class="btn btn-default" href="index.html .ajaxcontent" data-featherlight="ajax">Ajaxa>
      div>
            div>
            <div class="row marketing text-center">div>
        div>

        <div class="lightbox" id="fl1">
            <h2>Featherlight Defaulth2>
            <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 stylesh2>
            <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 ajaxh2>
            <p>With little code, you can build lightboxes that use custom content loaded with ajax...p>
        div>

 

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