js实现拖动模态框效果
更新时间:2022年07月03日 12:39:55 作者:阿旋要毕业~
这篇文章主要为大家详细介绍了js实现拖动模态框效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现拖动模态框效果的具体代码,供大家参考,具体内容如下
1.实现效果:
点击链接,弹出模态框。点击关闭,关闭模态框。
点击标题部分,可以随意移动模态框的位置。
主要是获取鼠标位置。
2.思路:
3.代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>拖动模态框</title> <style> body { padding: 0; margin: 0; } .login { display: none; position: fixed; top: 50%; left:50%; box-sizing:border-box; width:400px; height: 200px; background-color: pink; box-shadow: 0px 0px 20px #ddd; z-index: 9999; transform: translate(-50%, -50%); /* 让一个固定定位的盒子 垂直居中 */ } h4 { text-align: center; line-height: 70px; } form { text-align: center; margin-left: 40px; } a { text-decoration: none; text-align: center; } .finish { position: absolute; top:-15px; right:-15px; width: 30px; height: 30px; border: 1px solid white; border-radius: 50%; background-color: white; font-size: 10px; line-height: 30px; } .login-bg { display: none; width: 100%; height: 100%; position: fixed; top:0px; left: 0px; background-color: rgba(0,0,0,0.3); } .title { width: 400px; height: 50px; cursor: move; margin-top: -20px; height: 70px; } </style> </head> <body> <div class="bg"> <div class="link"><a href="javascript:;" >点击,弹出登录框</a></div> <div class="login"> <div class="finish">关闭</div> <div class = "title"><h4>登录会员</h4></div> <form action=""> <table> <tr> <td>用户名:</td> <td><input type="text" name="" id="" value="请输入用户名"></td> </tr> <tr> <td>登录密码:</td> <td><input type="text" name="" id="" value="请输入密码"></td> </tr> </table> <input type="submit" name="" id="" value="登录会员"> </form> </div> </div> <!-- 遮盖层 --> <div id="bg" class="login-bg"></div> <script> var a = document.querySelector('a'); var login = document.querySelector('.login'); var mask = document.querySelector('.login-bg'); var finish = document.querySelector('.finish'); a.addEventListener('click',function() { login.style.display = 'block'; mask.style.display = 'block'; }); finish.addEventListener('click', function(){ login.style.display = 'none'; mask.style.display = 'none'; }) var title = document.querySelector('.title'); title.addEventListener('mousedown', function(e){ var x = e.pageX - login.offsetLeft; var y = e.pageY - login.offsetTop; // 鼠标移动的时候,把鼠标在页面中的坐标,减去 鼠标在盒子内的坐标就是模态框的left和top值。 document.addEventListener('mousemove', move) function move(e) { // 别忘了加单位。 login.style.left = e.pageX - x + 'px'; login.style.top = e.pageY - y + 'px'; } // 鼠标弹起,让鼠标移动事件停止。 document.addEventListener('mouseup', function() { document.removeEventListener('mousemove', move); }) }) </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
该方法把指定的属性设置为指定的值。如果不存在具有指定名称的属性,该方法将创建一个新属性。2010-08-08uniapp实现h5、app与微信小程序三端pdf文件下载和预览功能
作为使用uni-app的小白来说,尝试了好几种方法,终于得到了我想要的效果,下面这篇文章主要给大家介绍了关于uniapp实现h5、app与微信小程序三端pdf文件下载和预览功能的相关资料,需要的朋友可以参考下2022-12-12innerHTML,outerHTML,innerText,outerText的用法及区别解析
本篇主要是对innerHTML,outerHTML,innerText,outerText的用法及区别进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助2013-12-12
最新评论