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


Posted in Javascript onMarch 10, 2012

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

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

一. 效果图

二.使用步骤:

1.引用Jquery.js和leanModal.min.js
Jquery弹出窗口插件 LeanModal的使用方法

<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.3water.com/js/2012/LeanModal/
打包下载 https://3water.com/jiaoben/42278.html
Javascript 相关文章推荐
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
PHP守护进程实例
Mar 06 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
详解Vue组件之作用域插槽
Nov 22 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 #Javascript
Node.js实战 建立简单的Web服务器
Mar 08 #Javascript
使用UglifyJS合并/压缩JavaScript的方法
Mar 07 #Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 #Javascript
node.js 一个简单的页面输出实现代码
Mar 07 #Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 #Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
Mar 07 #Javascript
You might like
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
php获取微信openid方法总结
2019/10/10 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
Python实现去除代码前行号的方法
2015/03/10 Python
python3处理含有中文的url方法
2018/05/10 Python
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
个人求职信范文分享
2013/12/13 职场文书
小学生期末自我鉴定
2014/01/19 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
生物工程专业求职信
2014/09/03 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
综合素质自我评价评语
2015/03/06 职场文书
幼师求职自荐信
2015/03/26 职场文书
2015年体育部工作总结
2015/04/02 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
医院消毒隔离制度
2015/08/05 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python