leanModal.js轻巧的弹出层插件

leanModal.js是一个轻盈的modal弹出层插件，效果类似boostrap的modal弹出层，你只要定义点击按钮的href属性即可。

分类：悬浮层/弹出层 > 弹窗难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

leanModal.js有以下优势

<ul class='ul_demo'> <li>完美隐藏页面内容</li> <li>压缩后1kb不到</li> <li>支持自定义宽度和高度</li> <li>自定义图片大小</li> <li>丰富的API</li> <li>漂亮的登录、注册和警告弹出层等</li> </ul>

jQuery调用modal方法

$(function() {
    $('a[rel*=leanModal]').leanModal({top: 200, closeButton: ".modal_close"});
});

演示一：基本效果

<div id="test">
    <p>素材火提供网站模板,网站源码,网页图标,jquery,PHP等网页设计素材下载,为广大网友制作网页提供网站素材免费下载参考</p>
</div>

演示二：注册弹出层

<a id="go" rel="leanModal" name="signup" href="#signup">带有关闭按钮</a>

<div id="signup">
    <div id="signup-ct">
        <div id="signup-header">
            <h2>注册</h2>
            <a class="modal_close" href="#"></a>
        </div>
            <div class="txt-fld">
                <label for="">用户名</label>
                <input id="" class="good_input" name="" type="text" />
            </div>
            <div class="txt-fld">
                <label for="">邮箱</label>
                <input id="" name="" type="text" />
            </div>
            <div class="txt-fld">
                <label for="">密码</label>
                <input id="" name="" type="text" />

            </div>
            <div class="btn-fld">
                <button type="submit">注册 &raquo;</button>
            </div>
    </div>
</div>