使用JS实现弹出层
来源：互联网 发布：java开发电脑配置 编辑：程序博客网 时间：2024/05/20 18:44
<!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 content="text/html; charset=gb2312" http-equiv="Content-Type" /> <title>简单的测试页面</title> <style type="text/css"> <!-- #dt_3 { cursor: pointer; }div#mbDIV { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #000; z-index: 10; filter: alpha(opacity=50); opacity: 0.5; /**设置50%透明 **/ } 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> </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 id="button_1" type="button" value="确定" /> <input id="button_2" type="button" value="取消" /> </form> </div> <script type="text/javascript"> <!-- /** * 显示和隐藏信息 * */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>
