资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
js 弹出层 并可以拖拽
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>弹出层并可拖拽</title> <style> html,body{height:100%;overflow:hidden;} body,div,h2{margin:0;padding:0;} body{font:12px/1.5 Tahoma;} center{padding-top:10px;} button{cursor:pointer;} #overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);display:none;} #win{position:absolute;top:50%;left:50%;width:400px;height:200px;background:#fff;border:4px solid #f90;margin:-102px 0 0 -202px;display:none;} h2{font-size:12px;height:18px;text-align:right;background:#FC0;border-bottom:3px solid #f90;padding:5px;cursor:move;} h2 span{color:#f90;cursor:pointer;background:#fff;border:1px solid #f90;padding:0 2px;} </style> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0Awindow.onload%20%3D%20function%20()%20%0D%0A%7B%20%0D%0Avar%20oWin%20%3D%20document.getElementById(%22win%22)%3B%20%0D%0Avar%20oLay%20%3D%20document.getElementById(%22overlay%22)%3B%20%0D%0Avar%20oBtn%20%3D%20document.getElementsByTagName(%22button%22)%5B0%5D%3B%20%0D%0Avar%20oClose%20%3D%20document.getElementById(%22close%22)%3B%20%0D%0Avar%20oH2%20%3D%20oWin.getElementsByTagName(%22h2%22)%5B0%5D%3B%20%0D%0Avar%20bDrag%20%3D%20false%3B%20%0D%0Avar%20disX%20%3D%20disY%20%3D%200%3B%20%0D%0AoBtn.onclick%20%3D%20function%20()%20%0D%0A%7B%20%0D%0AoLay.style.display%20%3D%20%22block%22%3B%20%0D%0AoWin.style.display%20%3D%20%22block%22%20%0D%0A%7D%3B%20%0D%0AoClose.onclick%20%3D%20function%20()%20%0D%0A%7B%20%0D%0AoLay.style.display%20%3D%20%22none%22%3B%20%0D%0AoWin.style.display%20%3D%20%22none%22%20%0D%0A%0D%0A%7D%3B%20%0D%0AoClose.onmousedown%20%3D%20function%20(event)%20%0D%0A%7B%20%0D%0A(event%20%7C%7C%20window.event).cancelBubble%20%3D%20true%3B%20%0D%0A%7D%3B%20%0D%0AoH2.onmousedown%20%3D%20function%20(event)%20%0D%0A%7B%20%0D%0Avar%20event%20%3D%20event%20%7C%7C%20window.event%3B%20%0D%0AbDrag%20%3D%20true%3B%20%0D%0AdisX%20%3D%20event.clientX%20-%20oWin.offsetLeft%3B%20%0D%0AdisY%20%3D%20event.clientY%20-%20oWin.offsetTop%3B%20%0D%0Athis.setCapture%20%26%26%20this.setCapture()%3B%20%0D%0Areturn%20false%20%0D%0A%7D%3B%20%0D%0Adocument.onmousemove%20%3D%20function%20(event)%20%0D%0A%7B%20%0D%0Aif%20(!bDrag)%20return%3B%20%0D%0Avar%20event%20%3D%20event%20%7C%7C%20window.event%3B%20%0D%0Avar%20iL%20%3D%20event.clientX%20-%20disX%3B%20%0D%0Avar%20iT%20%3D%20event.clientY%20-%20disY%3B%20%0D%0Avar%20maxL%20%3D%20document.documentElement.clientWidth%20-%20oWin.offsetWidth%3B%20%0D%0Avar%20maxT%20%3D%20document.documentElement.clientHeight%20-%20oWin.offsetHeight%3B%20%0D%0AiL%20%3D%20iL%20%3C%200%20%3F%200%20%3A%20iL%3B%20%0D%0AiL%20%3D%20iL%20%3E%20maxL%20%3F%20maxL%20%3A%20iL%3B%20%0D%0AiT%20%3D%20iT%20%3C%200%20%3F%200%20%3A%20iT%3B%20%0D%0AiT%20%3D%20iT%20%3E%20maxT%20%3F%20maxT%20%3A%20iT%3B%20%0D%0A%0D%0AoWin.style.marginTop%20%3D%20oWin.style.marginLeft%20%3D%200%3B%20%0D%0AoWin.style.left%20%3D%20iL%20%2B%20%22px%22%3B%20%0D%0AoWin.style.top%20%3D%20iT%20%2B%20%22px%22%3B%20%0D%0Areturn%20false%20%0D%0A%7D%3B%20%0D%0Adocument.onmouseup%20%3D%20window.onblur%20%3D%20oH2.onlosecapture%20%3D%20function%20()%20%0D%0A%7B%20%0D%0AbDrag%20%3D%20false%3B%20%0D%0AoH2.releaseCapture%20%26%26%20oH2.releaseCapture()%3B%20%0D%0A%7D%3B%20%0D%0A%7D%3B%20%0D%0A%3C%2Fscript%3E"> </head> <body> <div id="overlay"></div> <div id="win"><h2><span id="close">×</span></h2></div> <center><button>弹出层</button></center> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程