一个多层弹窗的jQuery插件

这个是我自己写的一个jQuery插件，这个插件帖出来主要是让朋友同我一起体验下闭包的魅力。废话不说，请看源代码：

/*
 * jQuery popDiv 插件
 * Version 1.10 (2010.4.1)
 * 支持 jQuery v1.4.0 或以上版本
 *
 * Copyright (c) 2010 洪珊珊
 */

;(function($){
    jQuery.fn.popDiv = function(opts){
		var $this = $(this);
		var strWinWidth = document.documentElement.clientWidth || window.innerWidth,
		    strWinHeight = document.documentElement.clientHeight || window.innerHeight,
			strScrollTop = getScrollTop();
		
		//默认参数
		var defaults = {
			css: {  //包裹层CSS样式
				position: 'absolute',
				top: function(){
					return (strWinHeight < $this.height()) ? (100+strScrollTop) : ((strWinHeight - $this.height()-50)/2+strScrollTop)
				},
				left: function(){
					return (strWinWidth < $this.width()) ? 100 : (strWinWidth/2 - $this.width()/2)
				},
				width: function(){
					return (strWinWidth < $this.width()) ? (strWinWidth - 200)+'px' : $this.width()
				},
				height: 'auto',
				backgroundColor: '#FFF',
				zIndex: 1000
			},
			overlayCSS: {   //遮罩层的CSS样式
				position: 'absolute',
				top: 0,
				left: 0,
				width: function(){
					return (strWinWidth<document.body.clientWidth) ? document.body.clientWidth : strWinWidth
				},
				height: function(){
					return (strWinHeight<document.body.clientHeight) ? document.body.clientHeight : strWinHeight
				},
				opacity: 0.7,
				backgroundColor: '#BBB'
			}
			
		}
		
		jQuery.extend(true, defaults, opts);
		
		//插入遮罩层
		var $overlay = $('<div></div>');
		$overlay.appendTo('body');
		$overlay.css(defaults.overlayCSS);
		$overlay.css('z-index',defaults.css.zIndex-1);
		
		//如果是IE6的话，在遮罩层中加入一个iframe
		if ($.browser.msie && $.browser.version=='6.0') {
		    $overlay.html('<iframe src="javascript:false" style="visibility:inherit; top:0px; left:0px; width:100%; height:100%; z-index:-1; filter=\'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)\';"></iframe>');
		}
		
		//对需要弹窗的内容进行包裹处理
		var $conlay = $('<div></div>');
		$conlay.css(defaults.css);
		$this.show().wrap($conlay);
		
		//实现关闭弹窗功能
		//参数bool：remove还是hide，true代表remove，false代表hide
		return (function(bool){
			if (bool) {
				$this.unwrap();
				$this.remove();
				$overlay.remove();
			} else {
				$this.unwrap().hide();
				$overlay.remove();
			}
		});
	}
	
	//获得被卷去部分的高度
	function getScrollTop() {
		var strScrollTop;
		if (typeof window.pageYOffset != 'undefined') {
			strScrollTop = window.pageYOffset;
		}
		else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
			strScrollTop = document.documentElement.scrollTop;
		}
		else if (typeof document.body != 'undefined') {
			strScrollTop = document.body.scrollTop;
		}
		return strScrollTop;
	}
})(jQuery);

 

“实现关闭弹窗功能”部分的代码便是使用了闭包，若有对闭包还有疑问的朋友，请阅读我前面写的《JavaScript中的闭包》一文。若有朋友觉得我以上代码有地方写得不得当的，也麻烦您告知我，在此我先谢过了！