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 相关文章推荐
在网页里看flash的trace数据的js类
Jan 10 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
对类Vue的MVVM前端库的实现代码
Sep 07 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
vue实现商品列表的添加删除实例讲解
May 14 Javascript
多个Vue项目部署到服务器的步骤记录
Oct 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
一台收音机,让一家人都笑逐颜开!
2020/08/21 无线电
PHP 中执行系统外部命令
2006/10/09 PHP
PHP DataGrid 实现代码
2009/08/12 PHP
php中大括号作用介绍
2012/03/22 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
js控制div及网页相关属性的代码
2009/12/19 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
document.write的几点使用心得
2014/05/14 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
python如何更新包
2020/06/11 Python
python中常用的数据结构介绍
2021/01/12 Python
python asyncio 协程库的使用
2021/01/21 Python
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
军训的自我鉴定
2013/12/10 职场文书
《分一分》教学反思
2014/04/13 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android