javascript实现移动的模态框效果 javascript实现移动的模态框效果

本文实例为大家分享了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);

注意：要添加移除事件，所以给鼠标移动函数单独拿出来，写一个函数名，添加和移除事件时引用函数名就可以了

代码示例：

拖动的模态框* {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); }点击，弹出登录框登录会员关闭用户名：
登录密码：
登录会员

页面效果：