模态窗口是网站开发中经常用的，点击弹出一个层用来显示或者输入，这样不仅操作方便而且用户体验也非常不错。这里我介绍一款我经常使用的jQuery插件：leanModal
LeanModal是一个非常不错的jQuery插件，主要用于创建模式对话框。可以展示或隐藏的页面内容，整个插件大小只有780bytes，可灵活变化高度和宽度，没有用到任何图片，支持在一个页面中创建多个实例，非常适合于创建：登录框，注册框，警告对话框等。最重要的是界面非常干净UI设计很不错。
LeanModal具有以下优点：
- 完美隐藏的页面内容
- 大小只有 1 kb
- 灵活的宽度和高度
- 免费的图像
- 在一个页面上的多个实例
- 伟大的登录、 注册 & 警报面板等
详细使用方法
1、 在页面上添加 JQuery，jquery.leanModal.min.js
|
1 2 |
<script src="JS/jquery-1.11.2.min.js"></script> <script src="JS/jquery.leanModal.min.js"></script> |
2、 设置需页面样式表，只需包括以下覆盖样式块你现有的样式表中。务必要隐藏您模态的元素与 ‘display: none;’ 。
|
1 2 3 4 5 6 7 8 9 10 |
#lean_overlay { position: fixed; z-index:100; top: 0px; left: 0px; height:100%; width:100%; background: #000; display: none; } |
3、触发事件，一定要设置你的触发锚以匹配您的目标元素的 id 的 href 属性。
|
1 |
$("a[rel*=leanModal]").leanModal(); |
或如果您希望在同一页上的多个模态窗口，只需将 ‘rel’ 属性添加到您的触发器和属性，通过调用函数就像这样
|
1 |
$("#trigger_id").leanModal({ top : 200, overlay : 0.4, closeButton: ".modal_close" }); |
演示及下载
LeanModal官方下载：下载地址
发布者：柚子，转转请注明出处：https://ityouzi.com/archives/jquery-leanmodal.html
微信扫一扫 
支付宝扫一扫 