技术&生活

(function($){
	function divDragGable(titleDivid , dragDivid)
	{
		document.getElementById(titleDivid).style.cursor = "move";
		document.getElementById(titleDivid).onmousedown=function(e){
			var posX;
			var posY;  
			var fdiv = document.getElementById(dragDivid); 
			if(!e) e = window.event;
			posX = e.clientX - parseInt(fdiv.style.left);
			posY = e.clientY - parseInt(fdiv.style.top);
			function mousemove(ev){
				if(ev==null) ev = window.event;
				fdiv.style.left = (ev.clientX - posX) + "px";
				fdiv.style.top = (ev.clientY - posY) + "px";
				return false;
			}
			$(document).mousemove(mousemove).mouseup(function(){
				$(document).unbind('mousemove',mousemove);
			});
		}
	}
	function setDivPox(jqBackDiv,jqPopDiv,isScrollEvent)
	{
		//自动判断当前是否支持W3C标准的
		var bodyObj = document.documentElement;
		//文档没有DOCTYPE声明，是 HTML文档,否则是XHTML文档
		if(document.compatMode == 'BackCompat'){
			bodyObj = document.body;
		}
		//--设置遮罩层为满屏
		jqBackDiv.width(Math.max(bodyObj.scrollWidth, document.documentElement.clientWidth));
		jqBackDiv.height(Math.max(bodyObj.scrollHeight, document.documentElement.clientHeight));
		//调整要显示的DIV的位置
		var dleft = bodyObj.clientWidth/2 - jqPopDiv.width()/2;
		var dtop = bodyObj.clientHeight/2 - jqPopDiv.height()/2;
		//如果是Scroll事件
		if(typeof(isScrollEvent)!= 'undefined' && isScrollEvent){
			dleft += bodyObj.scrollLeft + document.body.scrollLeft;
			dtop += bodyObj.scrollTop + document.body.scrollTop;
		}
		jqPopDiv.css({left:dleft,top:dtop,position:'absolute',zIndex:1001});
	}
	function pop(options,jq){
		$.extend(this.options,options || {});
		this.jq = jq;
	}
	pop.prototype={
		options:{
			closeId:'',//可以执行关闭当前层的DOM ID,这个值是可选项
			titleId:'', //层移动的DOM ID，这个值是可选项，
			backDivColor:'#333',//遮罩层的颜色
			showAnimate:true, //弹出层显示时是否有动画效果
			backDivId:'pop__div__id'//遮罩层的ID,一般不在程序中设置
		},
		show:function(){
			//弹出一个遮罩层
			var backDivId = this.options.backDivId;
			//--如果弹出层不存在则添加
			if($('#'+backDivId).length < 1){
				//--遮罩层追加到 body  //#333
				var divStr = '<div id="'+backDivId+'" style="background-color:'+this.options.backDivColor+';filter: Alpha(Opacity=40); -moz-opacity:.1; opacity:0.5;  position:absolute; left:0px;top:0px; z-index:1000"></div>';	
				$(divStr).appendTo('body');
			}
 
			//设置位置
			setDivPox($('#'+backDivId),this.jq);
 
			//动画效果显示出来
			$('#'+backDivId).show();
			this.options.showAnimate ? this.jq.fadeIn("slow") : this.jq.show();
 
			//将当前jQuery对象保存,在绑定事件中会用到
			var that = this;
 
			//绑定关闭事件的DOM
			var ary = this.options.closeId.split(',');
			for(var i=0; i<ary.length; ++i){
				$('#'+ary[i]).click(function(){
					that.hide();
				});
				//鼠标显示手型
				$('#'+ary[i]).css({cursor:'pointer'});
			}
 
			//绑定弹出层的移动效果
			if(this.options.titleId != ''){
				divDragGable(this.options.titleId , this.jq.attr('id'));
			}
 
			this.jq.data('resize',function(){
				setTimeout(function(){
					setDivPox($('#'+backDivId),that.jq);
				},10);
			});
			this.jq.data('scroll',function(){
				setTimeout(function(){
					setDivPox($('#'+backDivId),that.jq,true);
				},10);
			});
			$(window).resize(this.jq.data('resize')).scroll(this.jq.data('scroll'));
			return this;
		},
		hide:function(){
			//隐藏层
			var that = this;
			this.jq.hide();
			$('#'+this.options.backDivId).hide();
			//取消绑定的事件
			$(window).unbind('resize',this.jq.data('resize')).unbind('scroll',this.jq.data('scroll'));
			return this;
		}
	};
	$.fn.extend({pop:function(config){
		return new pop(config,this);
	}});
})(jQuery);

var api = $('#div1').pop({closeId:'close1,close2',titleId:'title1'}).show();
//api有show和hide两个方法，可以手动调用api.hide()来关闭层