| 本文实例为大家分享了javascript实现移动的模态框效果的具体代码，供大家参考，具体内容如下 页面效果：点击链接后，弹出登录模态框，点击关闭链接可以关闭模态框，鼠标在模态框标题区域按下后可以拖拽模态框，松开鼠标后，模态框停止移动 实现思路：1、html、css搭建好页面，设置好模态框内容和样式后，将模态框隐藏：display: none;如果点击弹出模态框后，页面背景色发生改变，可以添加一个遮罩层，将遮罩层也先隐藏
2、给点击后弹出模态框的元素添加点击事件- - -onclick
事件处理程序中设置- - -模态框 和 遮罩层 显示- - -eg:
login.style.display = ‘block';loginBg.style.display = ‘block'; 3、给关闭模态框元素添加点击事件- - -onclick
事件处理程序中设置- - -模态框 和 遮罩层 隐藏- - -eg: login.style.display = ‘none';loginBg.style.display = ‘none'; 4、给模态框标题部分添加鼠标按下事件- - -mousedown
获取鼠标在模态框中的位置
5、鼠标按下事件中再添加鼠标移动事件- - -mousemove document.addEventListener(‘mousemove', move); 获取鼠标在页面中的位置
鼠标的位置值 - 鼠标在模态框中的位置值 = 模态框在页面中的位置值
将计算得出的位置值赋值给模态框的top、left，就可以达到拖拽鼠标的效果，跟随鼠标移动
6、当鼠标松开后，模态框要停止移动。鼠标按下事件中再添加鼠标松开事件- - -mouseup
鼠标松开事件处理程序：页面移除鼠标移动事件- - -document.removeEventListener(‘mousemove', move);
注意：要添加移除事件，所以给鼠标移动函数单独拿出来，写一个函数名，添加和移除事件时引用函数名就可以了
代码示例：<!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> * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } .login-header { margin: 100px auto; height: 30px; line-height: 30px; font-size: 24px; text-align: center; } .login { display: none; width: 515px; height: 282px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid #ebebeb; background-color: #fff; box-shadow: 0px 0px 20px #ddd; text-align: center; z-index: 99999; } .login-title { position: relative; height: 50px; line-height: 50px; font-size: 18px; cursor: move; } .close { position: absolute; top: 0; right: 0; transform: translate(50%, -50%); width: 36px; height: 36px; line-height: 36px; font-size: 12px; border-radius: 18px; border: 1px solid #ddd; color: #666; background-color: #fff; } .login-input-content { margin: 10px 0; } .login-input label { display: inline-block; width: 80px; text-align: right; } .login-input input { width: 300px; height: 40px; margin: 10px 0; padding-left: 10px; border: 1px solid #ddd; outline-color: royalblue; } .loginBtn a { display: block; width: 180px; height: 35px; line-height: 35px; margin: 10px auto; border: 1px solid #ddd; } .login-bg { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .3); } </style></head><body> <div class="login-header"><a id="link" href="javascript:;" >点击，弹出登录框</a></div> <div class="login"> <div class="login-title"> 登录会员 <span><a class="close" href="javascript:void(0);" >关闭</a></span> </div> <div class="login-input-content"> <div class="login-input"> <label for="username">用户名：</label> <input type="text" name="info[username]" id="username" placeholder="请输入用户名"><br> </div> <div class="login-input"> <label for="password">登录密码：</label> <input type="password" name="info[password]" id="password" placeholder="请输入登录密码"><br> </div> </div> <div type="submit" value="登录会员" class="loginBtn"><a href="javascript:void(0);" >登录会员</a></div> </div> <!-- 遮盖层 --> <div class="login-bg"></div> <script> var link = document.querySelector('#link'); var login = document.querySelector('.login'); var loginBg = document.querySelector('.login-bg'); var close = document.querySelector('.close'); var loginTitle = document.querySelector('.login-title'); link.addEventListener('click', function() { login.style.display = 'block'; loginBg.style.display = 'block'; }) close.addEventListener('click', function() { login.style.display = 'none'; loginBg.style.display = 'none'; }) loginTitle.addEventListener('mousedown', function(e) { // 计算出鼠标按下时，鼠标在模态框中的位置 var x = e.pageX - login.offsetLeft; var y = e.pageY - login.offsetTop; // 给移动的模态框赋值位置 function move(e) { login.style.left = e.pageX - x + 'px'; login.style.top = e.pageY - y + 'px'; } // 添加鼠标事件，按下鼠标时模态框跟着鼠标移动 document.addEventListener('mousemove', move); // 鼠标松开时，模态框停止移动 document.addEventListener('mouseup', function() { document.removeEventListener('mousemove', move); }) }) </script></body></html>页面效果： 
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持51zixue.net。
下载地址:
vue中el-table实现自动吸顶效果(支持fixed)
利用vue对比两组数据差异的可视化组件详解 |
