javascript实现移动的模态框效果
更新时间：2022年07月04日 09:52:16 作者：qq_39111074
这篇文章主要为大家详细介绍了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>页面效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了如何用JavaScipt测网速，对测网速感兴趣的同学，可以参考下2021-05-05
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
这篇文章主要介绍了微信小程序使用picker实现时间和日期选择框功能,结合实例形式分析了微信小程序picker组件进行日期与时间选择的相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下2017-12-12
这篇文章主要为大家详细介绍了JavaScript实现滑块验证解锁，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
这篇文章主要介绍了javascript数组的内置方法，介绍的非常详解，具有参考借鉴价值，感兴趣的朋友一起学习吧，希望能够给你带来帮助2021-09-09
flash 得到自身url参数的代码，需要的朋友可以参考下。2009-11-11
这篇文章主要介绍了JavaScript中Cookie的使用之如何设置失效时间问题，具有很好的参考价值，希望对大家有所帮助。2022-12-12
众所周知在Javascript中,var、let、const都可用于变量声明,但是之前没有梳理过它们之间的区别,下面这篇文章主要给大家介绍了关于Js中var,let,const区别的相关资料,需要的朋友可以参考下2023-02-02
javascript写的异步加载js文件函数(支持数组传参)
这篇文章主要介绍了javascript写的异步加载js文件函数,同时支持单个文件和多个文件(数组传参),但不兼容IE6,需要的朋友可以参考下2014-06-06
平时在开发小程序的时候，弹窗应用场景还是蛮广泛的，但是微信官方提供的弹窗比较有局限性，不能自定义修改。下面通过本文给大家带来了微信小程序自定义弹窗wcPop插件，感兴趣的朋友跟随小编一起看看吧2018-11-11
使用requestAnimationFrame实现js动画性能好
requestAnimationFrame优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销，这篇文章给大家详细介绍使用requestAnimationFrame实现js动画2015-08-08
最新评论