js 遮蔽层+拖拽

 //css样式
 .over_layer{
		background-color: black;
		display: none;
		height: 100%;
		left: 0;
		opacity: 0.5;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 1001;
		}
//遮蔽层
<div id="fade" class="over_layer" style="background:black; filter: alpha(opacity=50); opacity: 0.5; -moz-opacity:0.5;"></div>

//js
function getScrollTop(){
		var scrollTop = 0;
		if(document.documentElement && document.documentElement.scrollTop){
			scrollTop = document.documentElement.scrollTop;
		}else if(document.body){
			scrollTop = document.body.scrollTop;
		}
		return scrollTop;
	}



	var wcontentflag = false,wcontentX=null,wcontentY=null,offsetWidth=null,offsetHeigth=null,isaddoffset=false;
	function showModel(showId,isdrop){
		$("#fade").css("height",window.screen.availHeight+parseFloat(getScrollTop()));
		$("#fade").css("width",window.screen.availWidth);
		try{
			$("#"+showId).css("z-index",1005);
			$("#"+showId).css("position","absolute");
			$("#"+showId).css("top",20+parseFloat(getScrollTop()));
			$("#"+showId).css("left",window.screen.availWidth/2-parseFloat($("#"+showId).css("width"))/2);
		}catch(e){}

		if(typeof(isdrop)=='undefined' || isdrop == true){
			$("#"+showId).bind("mousedown",function(e){
				if(!wcontentflag){
					wcontentflag = true;
					wcontentX = e.pageX;
					wcontentY = e.pageY;
					offsetWidth = e.pageX - parseFloat($(this).css("left"));
					offsetHeight = e.pageY - parseFloat($(this).css("top"));
					$(this).css("cursor","pointer");
				}
			});
		
		$("body").bind("mousemove",function(e){
			if(wcontentflag){
				var nowPageX = e.pageX;
				var nowPageY = e.pageY;
				var nowObjX = parseFloat($("#"+showId).css("left"));
				var nowObjY = parseFloat($("#"+showId).css("top"));

				nowObjX = parseFloat(nowObjX) + (nowPageX-nowObjX);
				nowObjY = parseFloat(nowObjY) + (nowPageY-nowObjY);

				nowObjX -= offsetWidth;
				nowObjY -= offsetHeight;

				$("#"+showId).css({left:nowObjX,top:nowObjY});
				$("#"+showId).css({left:nowObjX,top:nowObjY});
			}
		});

		$("body").bind("mouseup",function(e){
			if(wcontentflag){
				wcontentflag = false;
				isaddoffset =false;
				$("#"+showId).css("cursor","default");
			}
		});
	  }
	showAndHidden(showId,'show');
    showAndHidden('fade','show');
	}