Jquery彈出窗口插件 LeanModal的使用方法
更新時(shí)間：2012年03月10日 00:41:15 作者：
開(kāi)發(fā)網(wǎng)站少不了要經(jīng)常用彈出窗口的形式，今天在網(wǎng)上搜了個(gè)小插件LeanModal，記錄于此，方便自己，亦方便他人使用
開(kāi)發(fā)網(wǎng)站少不了要經(jīng)常用彈出窗口的形式，今天在網(wǎng)上搜了個(gè)小插件LeanModal，記錄于此，方便自己，亦方便他人使用。
此插件是個(gè)老外寫(xiě)的，體積小是它最大的優(yōu)點(diǎn)，壓縮后1k不到。當(dāng)然，此插件是寄生于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.頁(yè)面定義一個(gè)樣式，此樣式用于半透明的背景層，另外，還需要將彈出的層設(shè)置隱藏，代碼如下：
#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是將某一個(gè)ID的元素附加上彈出窗口的方法
方法2是可以將A標(biāo)簽中所有rel=“l(fā)eanModal”的元素附加上彈出窗口的方法
有3個(gè)參數(shù)可以重載，
top:彈出窗口離頂部的距離，像素為單位，不要加“px”。
overlay:背景的透明度，最大為1，值越大，透明度越深，初始值是0.5
closeButton：為打開(kāi)窗口的關(guān)閉按鈕樣式
$(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.fzitv.net/jiaoben/42278.html
此插件是個(gè)老外寫(xiě)的，體積小是它最大的優(yōu)點(diǎn)，壓縮后1k不到。當(dāng)然，此插件是寄生于JQuery上.
一. 效果圖
二.使用步驟：
1.引用Jquery.js和leanModal.min.js
復(fù)制代碼 代碼如下:
<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.頁(yè)面定義一個(gè)樣式，此樣式用于半透明的背景層，另外，還需要將彈出的層設(shè)置隱藏，代碼如下：
復(fù)制代碼 代碼如下:
#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是將某一個(gè)ID的元素附加上彈出窗口的方法
方法2是可以將A標(biāo)簽中所有rel=“l(fā)eanModal”的元素附加上彈出窗口的方法
有3個(gè)參數(shù)可以重載，
top:彈出窗口離頂部的距離，像素為單位，不要加“px”。
overlay:背景的透明度，最大為1，值越大，透明度越深，初始值是0.5
closeButton：為打開(kāi)窗口的關(guān)閉按鈕樣式
復(fù)制代碼 代碼如下:
$(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.fzitv.net/jiaoben/42278.html
您可能感興趣的文章:
- Jquery實(shí)現(xiàn)自定義彈窗示例
- 小巧強(qiáng)大的jquery layer彈窗彈層插件
- jQuery實(shí)現(xiàn)彈窗居中效果類(lèi)似alert()
- 運(yùn)用JQuery的toggle實(shí)現(xiàn)網(wǎng)頁(yè)加載完成自動(dòng)彈窗
- jquery模擬alert的彈窗插件
- jquery彈窗插件colorbox綁定動(dòng)態(tài)生成元素的方法
- jQuery實(shí)現(xiàn)簡(jiǎn)單彈窗遮罩效果
- jquery ezUI 雙擊行記錄彈窗查看明細(xì)的實(shí)現(xiàn)方法
- jquery實(shí)現(xiàn)彈出窗口效果的實(shí)例代碼
- jQuery+jqmodal彈出窗口實(shí)現(xiàn)代碼分明
- jQuery Mobile彈出窗、彈出層知識(shí)匯總
- jQuery實(shí)現(xiàn)的兩種簡(jiǎn)單彈窗效果示例
相關(guān)文章
jQuery通過(guò)擴(kuò)展實(shí)現(xiàn)抖動(dòng)效果的方法
這篇文章主要介紹了jQuery通過(guò)擴(kuò)展實(shí)現(xiàn)抖動(dòng)效果的方法,涉及jQuery擴(kuò)展的技巧及抖動(dòng)特效的實(shí)現(xiàn)方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
之前本人的工作和學(xué)習(xí)多以原生js 為主，對(duì)jQuery 一直都不是很了解，但jQuery 作為當(dāng)今最優(yōu)秀的js 類(lèi)庫(kù)之一，必須是要花時(shí)間好好學(xué)習(xí)下的，今天正好蛋疼，讀了里面一些代碼2011-04-04
JQuery1.4+ Ajax IE8 內(nèi)存泄漏問(wèn)題
將JQuery1.2.6升級(jí)到JQuery1.4，有幾天下班沒(méi)有關(guān)閉ajax輪詢網(wǎng)頁(yè)，第二天早上來(lái)，內(nèi)存耗盡，發(fā)現(xiàn)此內(nèi)存泄漏在IE6上不存在(IE7未測(cè)試),IE8上存在2010-10-10
jquery動(dòng)態(tài)分頁(yè)效果堪比時(shí)光網(wǎng)
剛剛弄好了一個(gè)jquery動(dòng)態(tài)分頁(yè)效果，拿出來(lái)與大家分享，效果與時(shí)光網(wǎng)的差不多2014-09-09
為jQuery增加join方法的實(shí)現(xiàn)代碼
正在做一個(gè)在線書(shū)簽管理的站點(diǎn)，有需要這樣一個(gè)功能,把匹配節(jié)點(diǎn)的id或值拼合起來(lái)以用來(lái)傳遞參數(shù)。
2010-11-11 
這篇文章主要介紹了JQuery的加載和選擇器用法,結(jié)合簡(jiǎn)單實(shí)例形式分析了jQuery的功能、加載、選擇器的相關(guān)使用技巧,需要的朋友可以參考下
2019-05-05 
Jquery拖拽并簡(jiǎn)單保存的實(shí)現(xiàn)代碼
今閑著無(wú)聊 順便看了下jquery ui的拖拽插件，實(shí)現(xiàn)拖拽的方法很簡(jiǎn)單，看到效果后興奮小下...
2010-11-11 
jQuery插件FusionCharts實(shí)現(xiàn)的Marimekko圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts實(shí)現(xiàn)的Marimekko圖效果,結(jié)合實(shí)例形式分析了jQuery使用FusionCharts插件結(jié)合x(chóng)ml數(shù)據(jù)繪制Marimekko圖的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03 
jQuery實(shí)現(xiàn)動(dòng)態(tài)添加節(jié)點(diǎn)與遍歷節(jié)點(diǎn)功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)添加節(jié)點(diǎn)與遍歷節(jié)點(diǎn)功能,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁(yè)面元素節(jié)點(diǎn)元素的動(dòng)態(tài)添加與遍歷相關(guān)操作技巧,需要的朋友可以參考下
2017-11-11