Jquery弹出窗口插件 LeanModal的使用方法

更新时间：2012年03月10日 00:41:15 作者：

开发网站少不了要经常用弹出窗口的形式，今天在网上搜了个小插件LeanModal，记录于此，方便自己，亦方便他人使用

开发网站少不了要经常用弹出窗口的形式，今天在网上搜了个小插件LeanModal，记录于此，方便自己，亦方便他人使用。

此插件是个老外写的，体积小是它最大的优点，压缩后1k不到。当然，此插件是寄生于JQuery上.

一. 效果图

二.使用步骤：

　　1.引用Jquery.js和leanModal.min.js

复制代码代码如下:

 
<script src="Javascript/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script src="Javascript/jquery.leanModal.min.js" type="text/javascript"></script> 

2.页面定义一个样式，此样式用于半透明的背景层，另外，还需要将弹出的层设置隐藏，代码如下：

复制代码代码如下:

 
#lean_overlay { position: fixed; z-index: 100; top: 0px; left: 0px; height: 100%; width: 100%; background: #000; display: none; } 
#OpenWindow { background: none repeat scroll 0 0 #FFFFFF; border-radius: 5px 5px 5px 5px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.7); display: none; padding-bottom: 2px; width: 404px; z-index: 11000; left: 50%; margin-left: -202px; opacity: 1; position: fixed; top: 200px; } 

3.加载方法，有两种方式
　　　　方法1是将某一个ID的元素附加上弹出窗口的方法
　　　　方法2是可以将A标签中所有rel=“leanModal”的元素附加上弹出窗口的方法
　　　　有3个参数可以重载，
　　　　top:弹出窗口离顶部的距离，像素为单位，不要加“px”。
　　　　overlay:背景的透明度，最大为1，值越大，透明度越深，初始值是0.5
　　　　closeButton：为打开窗口的关闭按钮样式

复制代码代码如下:

 
$(document).ready(function () { 
　　　　　　　//$('#aOpen').leanModal({ top: 100, closeButton: ".modal_close" });　 
$('a[rel*=leanModal]').leanModal({ top: 100, closeButton: ".modal_close" }); 
}); 

三. Demo下载
在线演示 http://http://demo.jb51.net/js/2012/LeanModal/
打包下载 https://www.jb51.net/jiaoben/42278.html

您可能感兴趣的文章:

jQuery多条件筛选如何实现
这篇文章主要介绍了jquery实现多条件筛选特效，推荐给大家，有需要的小伙伴可以参考下。
2015-11-11
jQuery文件上传插件Uploadify使用指南
支持多文件上传的jQuery文件上传插件Uploadify，目前此插件有两种版本即Flash版本和HTML5版本，
2014-06-06
基于jQuery实现左右图片轮播（原理通用）
这篇文章主要介绍了基于jQuery实现左右图片轮播，实现原理通用可通用，希望能和大家分享一下思路，感兴趣的小伙伴们可以参考一下
2015-12-12
jquery实现动态画圆
这篇文章主要给大家分享了一段jquery实现动态画圆代码,需要的朋友可以参考下
2014-12-12
简单常用的幻灯片播放实现代码
幻灯片自动播放图片是当前网站比较流行的一个展示方式，这里项目需要，我自己做了一个简单的，就不详细讲解了，代码很简单。直接看效果图和代码吧，希望对大家有所帮助
2013-09-09
jQuery的插件列表(2010-1-25更新)
jQuery 是我最喜欢的一个Javascript框架，下文中包含了众多��以为jQuery爱好者们使用的插件。如果你还知道其他的好东西，欢迎与大家分享。
2011-08-08
jQuery使用$.ajax提交表单完整实例
这篇文章主要介绍了jQuery使用$.ajax提交表单的方法,以完整实例形式分析了jQuery基于ajax数据提交的具体步骤与数据处理技巧,非常简单实用,代码备有详尽的注释便于理解,需要的朋友可以参考下
2015-12-12
jQuery操作表单常用控件方法小结
这篇文章主要介绍了jQuery操作表单常用控件方法,实例总结了jQuery针对常用表单控件的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
jQuery判断元素是否存在的可靠方法
这篇文章主要介绍了jQuery判断元素是否存在的可靠方法,需要的朋友可以参考下
2014-05-05
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
本文给大家分享一款经常使用的jquery全屏相册插件zoomvisualizer具有调节放大与缩小的功能，对jquery全屏相册插件zoomvisualizer感兴趣的朋友可以通过本文学习一下
2015-11-11