文章插图
分析1.点击弹出框，状态框和遮挡层（背景变灰）就会显示出来 display：block；
2.点击关闭按钮，模态框和遮挡层就会隐藏起来 display：none;
3.在页面中拖拽的原理：鼠标按下并且移动，之后松开鼠标
4.触发事件是鼠标按下mousedown，鼠标移动mousemove，鼠标松开mouseup
5.推拽过程：鼠标移动过程中，获得最新的值赋给模态框的left和top值，这样模态框就可以跟着鼠标走了
6.鼠标按下出发的事件源是最上面一行，就是id为title
7.鼠标的坐标减去鼠标在盒子内的坐标，才是真正模态框的位置
8.鼠标按下，我们要得到鼠标在盒子的坐标
9.鼠标移动，就让模态框的坐标设置为：鼠标坐标减去盒子坐标即可，注意移动事件写到按下事件里面
10.鼠标松开，就是停止拖拽，就是可以让鼠标移动事件解除
代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.login-header {width: 100%;text-align: center;height: 30px;font-size: 24px;line-height: 30px;}* {padding: 0;margin: 0;}.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;}</style></head><body><div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div><div id="login" class="login"><div id="title" class="login-title">登录会员<span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span></div><div class="login-input-content"><div class="login-input"><label>用户名：</label><input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input"></div><div class="login-input"><label>登录密码：</label><input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input"></div></div><div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div></div><!-- 遮盖层 --><div id="bg" class="login-bg"></div><script>var link = document.querySelector('#link'); //获取我们鼠标点击的对象var login = document.querySelector('.login'); //获得弹出框元素var mask = document.querySelector('#bg');var closeBtn = document.querySelector('#closeBtn');link.addEventListener('click', function() {login.style.display = 'block';mask.style.display = 'block';})closeBtn.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;console.log(y);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>
以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!
「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：
- 高并发web架构介绍 jsp转html静态页面
- cad自定义填充图案插件 cad自定义图案怎么添加
- 自定义logo制作有什么方法 自己怎样设计logo
- 电脑开机弹出American Megatrends错误怎么办 开机故障的解决办法
- siri怎么编辑自定义回复 怎么让siri说指定的话
- 在电脑属性中怎么填入自定义信息？
- siri怎么编辑自定义回复 如何让siri说指定的话
- 拔U盘之前任务栏出现设备弹出的选项有什么用？
- 电脑组策略怎么实现禁止自定义区域设置?
- 电脑开机弹出今日热点弹窗怎么办 永久关闭今日热点弹窗教程