js实现拖动模态框效果

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

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

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; }点击,弹出登录框关闭登录会员
用户名:
登录密码:

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

    推荐阅读