<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style> .ui-widget-overlay_ { height: 100%; left: 0; position: absolute; top: 0; width: 100%; background: url("images/ui-bg_flat_0_aaaaaa_40x100.png") repeat-x scroll 50% 50% #AAAAAA; opacity: 0.3; z-index: 1001; filter: Alpha(Opacity=30); /*{opacityOverlay}*/ } </style> </head> <body> <input type="button" id="btnUpload" onclick='divDialog()' value="弹出层" /> <%--遮盖层--%> <div id="divZ" class="ui-widget-overlay_" style="display: none"></div> <%--拖动层--%> <div id="saveDialog" style="display: none; position: absolute; z-index: 1003; border: solid 1px #AABCCF; left: 200px; top: 100px; background-color: white;200px"> <div id="divMove" style="background-color: #AAAAAA; 100%; height: 50px; cursor: move">单机按住标题拖动</div> <div id="fileQueue"><table><tr><td>内容区展现区</td></tr></table> </div> </div> </body> </html> <%--拖动JS--%> <script type="text/javascript"> var pic, mx, my; var tok = document.getElementById("divMove"); tok.onmousedown = function (e) { pic = document.getElementById("saveDialog"); pic.dx = mx - pic.offsetLeft; pic.dy = my - pic.offsetTop; return false; }; tok.onmouseup = function () { pic = null }; tok.ondragstart = function () { return false; }; document.onmousemove = function (e) { var e = e || event; var bd = document.body; mx = e.pageX || e.clientX + bd.scrollLeft - bd.clientLeft; my = e.pageY || e.clientY + bd.scrollTop - bd.clientTop; if (pic) with (pic.style) { left = mx - pic.dx + "px"; top = my - pic.dy + "px"; }; }; </script> <%--弹出层JS--%> <script type='text/javascript'> function divDialog(){ document.getElementById('saveDialog').style.display='block'; document.getElementById('divZ').style.display='block'; } </script>