javascript实现移动的模态框效果
本文实例为大家分享了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>
页面效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)