Jquery中通过使用LeanModal实现弹出层

来源：广州中睿信息技术有限公司

发布时间：2012/10/21 23:25:16 编辑：itlead 阅读 2260 次

　　Web开发中通常会用到弹出层，网上看到一老外写的一个jquery.leanModal.min.js插件感觉挺不错的。

　　使用方法如下：

　　1、首先创建一个html页面添加jquey和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> 　　jquery.leanModal.min.js中的代码如下：　　(function ($) { 　　$.fn.extend({ leanModal: function (options) { 　　var defaults = { top: 100, overlay: 0.5, closeButton: null }; var overlay = $("<div id='lean_overlay'></div>"); $("body").append(overlay); options = $.extend(defaults, options); return this.each(function () { 　　var o = options; $(this).click(function (e) { 　　varmodal_id = $(this).attr("href"); $("#lean_overlay").click(function () { close_modal(modal_id) }); $(o.closeButton).click(function () { close_modal(modal_id) }); varmodal_height = $(modal_id).outerHeight(); varmodal_width = $(modal_id).outerWidth(); 　　$("#lean_overlay").css({ "display": "block", opacity: 0 }); $("#lean_overlay").fadeTo(200, o.overlay); $(modal_id).css({ "display": "block", "position": "fixed", "opacity": 0, "z-index": 11000, "left": 50 + "%", "margin-left": -(modal_width / 2) + "px", "top": o.top + "px" }); $(modal_id).fadeTo(200, 1); e.preventDefault() 　　}) 　　}); function close_modal(modal_id) { $("#lean_overlay").fadeOut(200); $(modal_id).css({ "display": "none" }) } 　　} 　　}) 　　})(jQuery);

　　2、再在html页面中定义一个样式，此样式用于半透明的背景层，代码如下：

　　#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 5px5px5px; 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、接下来就是定义弹出层的js，如下：

　　$(document).ready(function () {　　　$('#aOpen').leanModal({ top: 100, closeButton: ".modal_close" }); 　　});

　　leanModal方法有3个参数重载：　　top:弹出窗口离顶部的距离，像素为单位，不要加”px”。　　overlay:背景的透明度，最大为1，值越大，透明度越深，初始值是0.5。　　closeButton：为打开窗口的关闭按钮样式。

　　下面是完整的html代码：

　　 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 　　<html xmlns="http://www.w3.org/1999/xhtml"> 　　<head> 　　<title></title> 　　<script src="Javascript/jquery-1.4.1.min.js" type="text/javascript"></script> 　　<script src="Javascript/jquery.leanModal.min.js" type="text/javascript"></script> 　　<script type="text/javascript"> 　　$(document).ready(function () { 　　$('#aOpen').leanModal({ top: 100, closeButton: ".modal_close" }); 　　}); 　　</script> 　　<style type="text/css"> 　　#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 5px5px5px; 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; } 　　#OpenWindow-header { background: url("Image/hd-bg.png") repeat scroll 0 0 transparent; border-bottom: 1px solid #CCCCCC; border-top-left-radius: 5px; border-top-right-radius: 5px; padding: 18px 18px 14px; } 　　.modal_close{ background: url("Image/modal_close.png") repeat scroll 0 0 transparent; display: block; height: 14px; position: absolute; right: 12px; top: 12px; width: 14px; z-index: 2; } 　　body { font-size: 13px; } 　　</style> 　　</head> 　　<body> 　　<div style="text-align: center"> 　　<ul> 　　<li><a id="aOpen" href="#OpenWindow" rel="leanModal">打开模式窗口</a></li> 　　</ul> 　　</div> 　　<div id="OpenWindow"> 　　<div id="signup-ct"> 　　<div id="OpenWindow-header"> 　　<h2> 　　Hello World!</h2> 　　<a href="#" class="modal_close"></a> 　　</div> 　　</div> 　　</div> 　　</body> 　　</html>

本站技术原创栏目文章均为中睿原创或编译，转载请注明：文章来自中睿，本站保留追究责任的权利。