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 相关文章推荐
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
Javascript base64编码实现代码
Dec 02 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
Jul 21 Javascript
详解React-Todos入门例子
Nov 08 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
JS判断数组那点事
Oct 10 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
Vue常用指令详解分析
Aug 19 Javascript
vue 内联样式style中的background用法说明
Aug 05 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
终于听上了直流胆调频
2021/03/02 无线电
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
JavaScript中的lastIndexOf()方法使用详解
2015/06/06 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
Java基础面试题
2012/11/02 面试题
初入社会应届生求职信
2013/11/18 职场文书
英语自我评价范文
2014/01/24 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
建筑工地文明标语
2014/10/09 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
外出听课学习心得体会
2016/01/15 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
Java基础之this关键字的使用
2021/06/30 Java/Android
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js