<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹出框拖拽关闭事件</title> <style> *{ margin:0;padding:0; } #box{ width:500px; height:250px; background:#f2f2f2; border:1px #ccc solid; border-radius:3px; position:absolute; left:calc(50% - 250px); top:calc(50% - 150px); } .boxHeader{ height:45px; line-height:45px; border-bottom:1px #ccc solid; } .title{ padding:0 15px; color:#333; float:left; } .close{ padding:0 15px; color:#ccc; font-size:20px; float:right; cursor: pointer; } .boxCont{ padding:25px 15px; font-size:14px; color:#666; text-align:center; } </style> </head> <body> <div id="box"> <div class="boxHeader"> <div class="title">标题内容</div> <div class="close" id="close">×</div> </div> <div class="boxCont"> 我是内容我是内容我是内容我是内容我是内容 </div> </div> <script> var Close=document.getElementById('close'); Close.οnclick=function(){ box.style.display='none'; }; box.οnmοusedοwn=function(e){ var ev= e||event; var l=ev.clientX-box.offsetLeft; var t=ev.clientY-box.offsetTop; document.οnmοusemοve=function(e){ var ev = e||event; var needLeft=ev.clientX-l; var needTop=ev.clientY-t; //不超出左边边框 needLeft<0?needLeft=0:needLeft; //不超出上边边框 needTop<0?needTop=0:needTop; //不超出右边边框 var maxLeft=innerWidth-box.offsetWidth; needLeft>maxLeft?needLeft=maxLeft:needLeft; //不超出底部边框 var maxTop=innerHeight-box.offsetHeight; needTop>maxTop?needTop=maxTop:needTop; box.style.left=needLeft+'px'; box.style.top=needTop+'px'; }; document.οnmοuseup=function(){ document.οnmοusemοve=document.οnmοuseup=null; }; } </script> </body> </html>
简单的弹出框拖拽关闭事件
最新推荐文章于 2024-08-01 12:56:26 发布