div-弹出框及拖拽

2015/02/17 41193
<html>
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>提示信息框</title> 
  <script src="../js/jquery.min.js" type="text/javascript"></script> 
  <style type="text/css">
	#massage_box {
		position: absolute;
		left: expression((body.clientWidth-350)/2);
		top: expression((body.clientHeight-200)/2);
 		width:236px;
		height:118px;
		background:#91cce4;
		filter:alpha(opacity=90);
		visibility: hidden
	}

	#mask {
		position: absolute;
		top: 0;
		left: 0;
		width: expression(body.scrollWidth);
		height: expression(body.scrollHeight);
		background: #666;
		filter: ALPHA(opacity=60);
		z-index: 1;
		visibility: hidden
	}

	.massage {
		width:100%;
		height:21px;
		background:#5fc7db;
		line-height:21px;
		text-align:left;
		vertical-align:middle;
		position:relative;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px;
		color: #fff
	}
	.massage a{ 
		width:16px; height:16px; vertical-align:middle; margin-top:3px; margin-left:6px; text-indent:-999px; display:block; float:left;
		}
	.sc{
		background:url(images/info_box02.png) 	no-repeat;
		}
	.sc:hover{
		background:url(images/info_box02_on.png) no-repeat;
	}
	.bc{
		background:url(images/info_box03.png) no-repeat;
		}
	.bc:hover{
		background:url(images/info_box03_on.png) no-repeat;
		}
	.tj{
		background:url(images/info_box01.png) no-repeat; 
		}
	.tj:hover{background:url(images/info_box01_on.png) no-repeat;}
	.massage a img{vertical-align:middle;}
	.close{
		width:21px; height:21px; position:absolute; right:0px; top:-1px; background:url(images/info_box04.png) no-repeat;text-indent:-999px; display:block;
	}
	.close:hover{ 							background:url(images/info_box04_on.png) no-repeat;
	}

	.info{padding-left:8px; margin-top:4px;}
	.info li{  height:20px; line-height:20px; list-style-type:none; }
	.info li.pz{ vertical-align:top; }
	.info li.pz span{ vertical-align:top;  }
	.text{width:170px; height:40px;}
	.info .org{ font-weight:bold; color:#F60;}
</style> 
  <!--实现层移动--> 
  <script language="javascript">
  $(function(){
	$("#massage").mousedown(
		function(event){
			var isMove = true;
			var screenW = $(document.body).width();
			var screenH = $(document.body).height();
			var abs_x = event.pageX - $('#massage_box').offset().left; 
			var abs_y = event.pageY - $('#massage_box').offset().top;
			$(document).mousemove(function (event) {  
                    if (isMove) {  
                        var obj = $('#massage_box'); 
						var left_x = event.pageX - abs_x;
						var top_y = event.pageY - abs_y;
						if((screenW-240)<=left_x){
							left_x = screenW-240;
						}
						if((screenH-120)<=top_y){
							top_y = screenH-120;
						}
						if(left_x<0){
							left_x=20;
						}
						if(top_y<0){
							top_y=10;
						}
                        obj.css({'left':left_x, 'top':top_y});  
                    }  
				}
			 ).mouseup(  
                                    function () {  
                                        isMove = false;  
                                    }  
                            );
		}
	);
})
</script> 
 </head>
 <body> 
  <div id="massage_box">
   <div class="massage" id ="massage">
    <a class="tj" >添加</a>
	<a class="sc" >删除</a>
	<a class="bc" >保存</a>
    <span class="close" onclick="massage_box.style.visibility='hidden'; mask.style.visibility='hidden'" >关闭</span>
    </div> 
    <ul class="info">
		<li>上日：<span class="org">487</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当日：<span class="org">610</span></li>
		<li>连续5日最高产量：<span class="org">920</span></li>
		<li class="pz"><span>批注：</span><textarea class="text"></textarea></li>
	</ul>
  </div> 
  <div id="mask"></div> 
  <span onclick="mask.style.visibility='visible';massage_box.style.visibility='visible'" style="cursor:hand"><a href="#">弹出</a></span>  
 </body>
</html>
代码片段
