LeanModal.js 是一个轻量级的 jQuery 模态框插件，它依赖于 CSS 来工作。
  • 分享到微信朋友圈
    X
立即下载 查看演示

关于LeanModal.js

LeanModal 是一个轻量级的 jQuery 模态框插件，它依赖于 CSS 来工作。要使用 LeanModal 创建一个模态框，你需要引入 jQuery 库和 LeanModal 插件，然后使用相应的 CSS 样式来装饰模态框。

如何使用

步骤 1： 将 jquery.js，jquery.leanModal.min.js 添加到您的页面：

<script type="text/javascript" src="path_to/jquery.js"></script>
<script type="text/javascript" src="path_to/jquery.leanModal.min.js"></script>

步骤 2： 加入css样式

一定要用"display: none;"来隐藏你的模态元素。

<style>
    #lean_overlay
    {
        position: fixed;
        z-index: 100;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        background: #000;
        display: none;
    }
</style>

步骤 3： 调用leanModal

如果您希望在同一页上的多个模态窗口，只需将 'rel' 属性添加到您的触发器和属性，通过调用函数就像这样：

$("a[rel*=leanModal]").leanModal();

单独调用这样：

$("#trigger_id").leanModal({ top : 200, overlay : 0.4, closeButton: ".modal_close" });

优势

  • 完美隐藏的页面内容

  • 大小只有 1 kb

  • 灵活的宽度和高度

  • 免费的图像

  • 在一个页面上的多个实例

  • 伟大的登录、 注册 & 警报面板等

弱点

  • 没有画廊、 iframe 或 ajax 的支持

  • 在 IE6 中未经测试