js实现拖动模态框效果 js实现拖动模态框效果

本文实例为大家分享了js实现拖动模态框效果的具体代码，供大家参考，具体内容如下
1.实现效果：

文章图片

点击链接，弹出模态框。点击关闭，关闭模态框。
点击标题部分，可以随意移动模态框的位置。
主要是获取鼠标位置。
【js实现拖动模态框效果】2.思路：

文章图片

3.代码：

拖动模态框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; }点击，弹出登录框关闭登录会员
用户名：
登录密码：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。