清华大佬耗费三个月吐血整理的几百G的资源,免费分享!....>>>
<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> 当日:<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>