Jquery弹出窗口插件 LeanModal的使用方法
2012-03-10 00:00
856 查看
开发网站少不了要经常用弹出窗口的形式,今天在网上搜了个小插件LeanModal,记录于此,方便自己,亦方便他人使用。
此插件是个老外写的,体积小是它最大的优点,压缩后1k不到。当然,此插件是寄生于JQuery上.
一. 效果图
二.使用步骤:
1.引用Jquery.js和leanModal.min.js
2.页面定义一个样式,此样式用于半透明的背景层,另外,还需要将弹出的层设置隐藏,代码如下:
3.加载方法 ,有两种方式
方法1是将某一个ID的元素附加上弹出窗口的方法
方法2是可以将A标签中所有rel=“leanModal”的元素附加上弹出窗口的方法
有3个参数可以重载,
top:弹出窗口离顶部的距离,像素为单位,不要加“px”。
overlay:背景的透明度,最大为1,值越大,透明度越深,初始值是0.5
closeButton:为打开窗口的关闭按钮样式
三. Demo下载
在线演示 http://http://demo.jb51.net/js/2012/LeanModal/
打包下载 http://www.jb51.net/jiaoben/42278.html
此插件是个老外写的,体积小是它最大的优点,压缩后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/
打包下载 http://www.jb51.net/jiaoben/42278.html
相关文章推荐
- Jquery弹出窗口插件 LeanModal的使用方法
- jQuery弹出窗口插件"LeanModal.js"的使用
- Jquery弹出层插件ThickBox的使用方法
- Jquery弹出层插件ThickBox的使用方法
- LeanModal 轻量级jquery弹出层插件
- jQuery弹出层插件与使用方法
- 打开一个iframe,从iframe更改父窗口parent里面的内容,jquery弹出窗口插件fancybox的使用
- 使用Jquery仿模态对话框插件Remodal实现弹出响应窗口
- FireFox中使用JQuery的ajaxfileupload插件返回JSON格式数据提示保存的解决方法。
- Flex使用Popupmanager弹出窗口的交互传值方法
- jQuery插件(右下角弹出窗口)
- Coin Slider jQuery插件使用方法
- jQuery的DataTables插件的使用方法
- jquery表单插件Autotab使用方法详解
- jquery.cookie插件的方法使用注意点
- jQuery表格插件ParamQuery简单使用方法示例
- jQuery灯箱插件lightBox使用方法
- JQuery扩展插件Validate—1基本使用方法
- jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法(转)
- 【转】jquery图片播放插件Fancybox使用方法