JS实现拖动模态框案例 JS实现拖动模态框案例

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

文章图片

需求分析：

点击登录后登录表单和遮罩层显示，点击关闭按钮隐藏。
输入密码时可以明文查看或者隐藏。
在表单的头部按下鼠标后可以拖拽表单。
鼠标弹起拖拽结束。

话不多说，我们直接上代码：

- 锐客网.login-header {width: 100%; text-align: center; height: 30px; font-size: 24px; line-height: 30px; }ul,li,ol,dl,dt,dd,div,p,span,h1,h2,h3,h4,h5,h6,a {padding: 0px; margin: 0px; }.login {display: none; width: 512px; height: 280px; position: fixed; border: #ebebeb solid 1px; left: 50%; top: 50%; background: #ffffff; box-shadow: 0px 0px 20px #ddd; z-index: 9999; transform: translate(-50%, -50%); }.login-title {width: 100%; margin: 10px 0px 0px 0px; text-align: center; line-height: 40px; height: 40px; font-size: 18px; position: relative; cursor: move; }.login-input-content {margin-top: 20px; }.login-button {width: 50%; margin: 30px auto 0px auto; line-height: 40px; font-size: 14px; border: #ebebeb 1px solid; text-align: center; }.login-bg {display: none; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: rgba(0, 0, 0, .3); }a {text-decoration: none; color: #000000; }.login-button a {display: block; }.login-input input.list-input {float: left; line-height: 35px; height: 35px; width: 350px; border: #ebebeb 1px solid; text-indent: 5px; }.login-input {overflow: hidden; margin: 0px 0px 20px 0px; }.login-input label {float: left; width: 90px; padding-right: 10px; text-align: right; line-height: 35px; height: 35px; font-size: 14px; }.login-title span {position: absolute; font-size: 12px; right: -20px; top: -30px; background: #ffffff; border: #ebebeb solid 1px; width: 40px; height: 40px; border-radius: 20px; } 点击，弹出登录框登录会员关闭用户名：登录密码：登录会员

【JS实现拖动模态框案例】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。