js实现div弹框和关闭
来源:互联网 发布:夏普网络扫描仪工具 编辑:程序博客网 时间:2024/06/09 22:36
<!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=gbk" /><title>JS弹出可拖拽可关闭的div层</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;}#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><script>window.onload = function (){ var oWin = document.getElementById("win"); var oBtn = document.getElementsByTagName("button")[0]; var oClose = document.getElementById("close"); var oH2 = oWin.getElementsByTagName("h2")[0]; var bDrag = false; var disX = disY = 0; oBtn.onclick = function () { oWin.style.display = "block" }; oClose.onclick = function () { oWin.style.display = "none" }; oClose.onmousedown = function (event) { (event || window.event).cancelBubble = true; }; oH2.onmousedown = function (event) { var event = event || window.event; bDrag = true; disX = event.clientX - oWin.offsetLeft; disY = event.clientY - oWin.offsetTop; this.setCapture && this.setCapture(); return false }; document.onmousemove = function (event) { if (!bDrag) return; var event = event || window.event; var iL = event.clientX - disX; var iT = event.clientY - disY; var maxL = document.documentElement.clientWidth - oWin.offsetWidth; var maxT = document.documentElement.clientHeight - oWin.offsetHeight; iL = iL < 0 ? 0 : iL; iL = iL > maxL ? maxL : iL; iT = iT < 0 ? 0 : iT; iT = iT > maxT ? maxT : iT; oWin.style.marginTop = oWin.style.marginLeft = 0; oWin.style.left = iL + "px"; oWin.style.top = iT + "px"; return false }; document.onmouseup = window.onblur = oH2.onlosecapture = function () { bDrag = false; oH2.releaseCapture && oH2.releaseCapture(); };};</script></head><body><div id="win"><h2><span id="close">×</span></h2></div><center><button>弹出层</button></center></body></html>
0 0
- js实现div弹框和关闭
- JS弹出div和关闭
- JS弹出div和关闭
- js实现右下角可关闭最小化div
- [转]JS弹出div和关闭
- JS来实现右下角弹出DIV,可最小化关闭
- div+js的伸缩控制代码(展开和关闭)
- JS实现动态添加和删除DIV
- div动态展开和关闭
- CSS+JS实现点击文字弹出定时自动关闭的DIV层菜单
- 【转载】JS+CSS实现带关闭按钮的DIV弹出窗口
- js点击页面其他地方关闭div
- JS实现DIV提示框的效果
- JS实现DIV提示框的效果
- JS实现DIV拖动
- js实现div拖动
- js 实现div定位
- JS实现div居中
- Silverlight中用户直接退出浏览器时如何判断用户离线
- itextpdf输出PDF笔记
- Java学习之反射机制
- Climbing Stairs
- 怎样读一篇论文
- js实现div弹框和关闭
- UML之状态图
- Thread - JConsole
- php导出excel
- Spring4.0使用websocke遇到的一些问题
- 孙鑫 VC++深入详解——学习笔记
- HDU4782——Beautiful Soup(模拟)
- 关于Cocos2d-x的一些认识(5)
- sleep和wait的区别