昨天闲着无聊写了一个最简单的弹出层效果,支持拖动,鼠标放在标题栏指针会变成十字,但是点下和拖动的时候却变成了输入,IE内核浏览器正常,哪个高手能帮着解决一下,感谢
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="content-Type" content="text/html;charset=utf-8"/> 5 <style type="text/css"> 6 #login 7 { 8 display:none; 9 border:10px solid #3366FF; 10 height:30%; 11 width:50%; 12 position:absolute;/*让节点脱离文档流,我的理解就是,从页面上浮出来,不再按照文档其它内容布局*/ 13 top:24%;/*节点脱离了文档流,如果设置位置需要用top和left,right,bottom定位*/ 14 left:24%; 15 z-index:2;/*个人理解为层级关系,由于这个节点要在顶部显示,所以这个值比其余节点的都大*/ 16 background: white; 17 } 18 #over 19 { 20 width: 100%; 21 height: 100%; 22 opacity:0.8;/*设置背景色透明度,1为完全不透明,IE需要使用filter:alpha(opacity=80);*/ 23 filter:alpha(opacity=80); 24 display: none; 25 position:absolute; 26 top:0; 27 left:0; 28 z-index:1; 29 background: silver; 30 } 31 #title 32 { 33 background:greenyellow; 34 width:100%; 35 height:1.5em; 36 } 37 #title a 38 { 39 float:right; 40 } 41 </style> 42 </head> 43 <body> 44 <a href="javascript:show()">弹出</a> 45 <div id="login"> 46 <div id="title" style="cursor:move"> 47 <a href="javascript:hide()">关闭</a></div> 48 <div>这里是关闭弹窗的内容</div> 49 <div>点击标题栏进行拖动</div> 50 </div> 51 <div id="over"></div> 52 </body> 53 </html> 54 <script type="text/javascript" src="jquery.min.js"></script> 55 <script type="text/javascript"> 56 var x_max = $(window).width(); 57 var y_max = $(window).height(); 58 var div_width = $("#login").width() + 20;//20是边框 59 var div_height = $("#login").height() + 20; 60 var _x_max = x_max - div_width;//最大水平位置 61 var _y_max = y_max - div_height;//最大垂直位置 62 function show() 63 { 64 var x = (x_max - div_width) / 2;//水平居中 65 var y = (y_max - div_height) / 2;//垂直居中 66 $("#login").css({"left": x + 'px',"top": y + 'px'});//设置初始位置,防止移动后关闭再打开位置在关闭时的位置 67 $("#login").css("display","block"); 68 $("#over").css("display","block"); 69 } 70 function hide() 71 { 72 $("#login").css("display","none"); 73 $("#over").css("display","none"); 74 } 75 $(document).ready(function(){ 76 $("#title").mousedown(function(title){//title代表鼠标按下事件 77 var point_x = title.pageX;//鼠标横坐标,有资料说pageX和pageY是FF独有,不过经过测试chrome和IE8是可以支持的,其余的浏览器没有装,没测 78 var point_y = title.pageY;//鼠标纵坐标 79 var title_x = $(this).offset().left;//标题横坐标 80 var title_y = $(this).offset().top;//标题纵坐标 81 $(document).bind("mousemove",function(move){ 82 $(this).css("cursor","move"); 83 var _point_x = move.pageX;//鼠标移动后的横坐标 84 var _point_y = move.pageY;//鼠标移动后的纵坐标 85 var _x = _point_x - point_x;//移动的水平距离 86 var _y = _point_y - point_y;//移动的纵向距离 87 // console.debug('水平位移: ' + _x + '垂直位移: ' + _y); 88 var __x = _x + title_x;//窗口移动后的位置 89 var __y = _y + title_y;//窗口移动后的位置 90 __x > _x_max ? __x = _x_max : __x = __x;//水平位置最大为651像素 91 __y > _y_max ?__y = _y_max : __y = __y;//垂直位置最大为300像素 92 __x < 0 ? __x = 0 : __x = __x;//水平位置最小为0像素 93 __y < 0 ?__y = 0 : __y = __y;//垂直位置最小为0像素 94 // console.debug('标题X:' + title_x + '标题Y:' + title_y); 95 $("#login").css({"left":__x,"top":__y}); 96 });//绑定鼠标移动事件,这里绑定的是标题,但是如果移动到区域外的话会导致事件不触发 97 $(document).mouseup(function(){ 98 $(this).unbind("mousemove");//鼠标抬起,释放绑定,防止松开鼠标后,指针移动窗口跟着移动 99 }); 100 }); 101 }); 102 </script>