masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > teks badan

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

WBOY
Lepaskan： 2016-05-16 17:55:28
asal
1300 orang telah melayarinya

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

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

一. 效果图

二.使用步骤：

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

复制代码 代码如下:




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
Label berkaitan：
弹出窗口
sumber：php.cn
Artikel sebelumnya：javascript 基础篇3 类，回调函数，内置对象，事件处理_基础知识 Artikel seterusnya：javascript 基础篇2 数据类型，语句，函数_基础知识
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
2
1901
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
10
2071
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1742
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1647
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1655
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan