<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>简单的测试页面</title> <style type="text/css"> <!-- html { height: 100%; } body { margin: 0px; padding: 0px; height: 100%; } #dt_3 { cursor: pointer; } div#mbDIV { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #AAAAAA; z-index: 10; filter: alpha(opacity=80);opacity:0.8; } div#loginDIV { position: absolute; width: 300px; height: 150px; background-color: #FFFF00; z-index: 20; } div#loginTopDIV { width: 100%; height: 20px; background-color: #FF0000; cursor: move; } --> </style> <script type="text/javascript"> <!-- function show(ele) { eval(ele + ".style.display = ''"); } function hidden(ele) { eval(ele + ".style.display = 'none'"); } //--> </script> </head> <body> <div style="overflow: hidden;"> <h3>请点击 --> 03号拖拉机</h3> <p id="dt_1">01号拖拉机</p> <p id="dt_2">02号拖拉机</p> <p id="dt_3">03号拖拉机</p> <p id="dt_4">04号拖拉机</p> <p id="dt_5">05号拖拉机</p> <p id="dt_6">06号拖拉机</p> <p id="dt_7">07号拖拉机</p> <p id="dt_8">08号拖拉机</p> <p id="dt_9">09号拖拉机</p> <p id="dt_10">10号拖拉机</p> <p id="dt_11">11号拖拉机</p> </div> <div id="mbDIV" style="display: none;"></div> <div id="loginDIV" style="top: 200px;left: 300px;display: none;"> <div id="loginTopDIV">Move</div> <p style="text-align: center;">登陆内容在这里哦</p> <form action="#" method="get" style="text-align: center;"> <input type="button" value="确定" id="button_1" /> <input type="button" value="取消" id="button_2" /> </form> </div> <script type="text/javascript"> <!-- /** * 这里是乱七八遭信息 * */ for(var i=1;i<=11;i++) { eval("var dt_" + i + " = document.getElementById('dt_" + i + "')"); } var mbDIV = document.getElementById("mbDIV"); var loginDIV = document.getElementById("loginDIV"); var loginTopDIV = document.getElementById("loginTopDIV"); document.getElementById("button_1").onclick = function() { hidden("loginDIV"); hidden("mbDIV"); } document.getElementById("button_2").onclick = function() { hidden("loginDIV"); hidden("mbDIV"); } dt_3.onclick = function() { loginDIV.style.top = "200px"; loginDIV.style.left = "300px"; show("loginDIV"); show("mbDIV") } /** *这里写的是拖动信息 * */ loginTopDIV.onmousedown = Down; var tHeight,lWidth; function Down(e) { var event = window.event || e; tHeight = event.clientY - parseInt(loginDIV.style.top.replace(/px/,"")); lWidth = event.clientX - parseInt(loginDIV.style.left.replace(/px/,"")); document.onmousemove = Move; document.onmouseup = Up; } function Move(e) { var event = window.event || e; var top = event.clientY - tHeight; var left = event.clientX - lWidth; //判断 top 和 left 是否超出边界 top = top < 0 ? 0 : top; top = top > document.body.offsetHeight - 150 ? document.body.offsetHeight - 150 : top; left = left < 0 ? 0 : left; left = left > document.body.offsetWidth - 300 ? document.body.offsetWidth - 300 : left; loginDIV.style.top = top + "px"; loginDIV.style.left = left +"px"; } function Up() { document.onmousemove = null; } //--> </script> </body> </html>