JavaScript实现模态框拖拽效果
在这里做一个模态框拖曳的案例，在这里要实现的功能有：
1.点击弹出层， 会弹出模态框， 并且显示灰色半透明的遮挡层。
2.点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。
3.鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。
4.鼠标松开，可以停止拖动模态框移动。
实现思路为：
点击弹出层， 模态框和遮挡层就会显示出来display:block;
点击关闭按钮，模态框和遮挡层就会隐藏起来 display:none;
在页面中拖拽的原理： 鼠标按下并且移动， 之后松开鼠标。
触发事件是鼠标按下 mousedown， 鼠标移动mousemove 鼠标松开 mouseup。
拖拽过程: 鼠标移动过程中，获得最新的值赋值给模态框的left和top值， 这样模态框可以跟着鼠标走了。
鼠标按下触发的事件源是 最上面一行，即<div id="title" class="login-title">登录会员。
鼠标的坐标 减去 鼠标在盒子内的坐标， 才是模态框真正的位置。
鼠标按下，我们要得到鼠标在盒子的坐标。
鼠标移动，让模态框的坐标 设置为 ： 鼠标坐标 减去盒子坐标即可，注意移动事件写到按下事件里面。
鼠标松开，就停止拖拽，即让鼠标移动事件解除 。
实现代码为：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.login-header {
width: 100%;
text-align: center;
height: 30px;
font-size: 24px;
line-height: 30px;
}
ul,
li,
ol,
dl,
dt,
dd,
div,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
a {
padding: 0px;
margin: 0px;
}
.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:;" rel="external nofollow" >点击，弹出登录框</a></div>
<div id="login" class="login">
<div id="title" class="login-title">登录会员
<span><a id="closeBtn" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" 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);" rel="external nofollow" rel="external nofollow" id="login-button-submit">登录会员</a></div>
</div>
<!-- 遮盖层 -->
<div id="bg" class="login-bg"></div>
<script>
// 1. 获取元素
var login = document.querySelector('.login');
var mask = document.querySelector('.login-bg');
var link = document.querySelector('#link');
var closeBtn = document.querySelector('#closeBtn');
var title = document.querySelector('#title');
// 2. 点击弹出层这个链接 link 让mask 和login 显示出来
link.addEventListener('click', function() {
mask.style.display = 'block';
login.style.display = 'block';
})
// 3. 点击 closeBtn 就隐藏 mask 和 login
closeBtn.addEventListener('click', function() {
mask.style.display = 'none';
login.style.display = 'none';
})
// 4. 开始拖拽
// (1) 鼠标按下， 获得鼠标在盒子内的坐标
title.addEventListener('mousedown', function(e) {
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
// (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
document.addEventListener('mousemove', move)
function move(e) {
login.style.left = e.pageX - x + 'px';
login.style.top = e.pageY - y + 'px';
}
// (3) 鼠标弹起，就让鼠标移动事件移除
document.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', move);
})
})
</script>
</body>
</html>
实现效果为：
到此这篇关于JavaScript实现模态框拖拽效果的文章就介绍到这了,更多相关JavaScript模态框拖拽内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Bootstrap模态框水平垂直居中与增加拖拽功能
最近开发一个CMS系统使用上了Bootstrap,在开发一个添加某些选项时,打算弹出一个模态框,但是发现,模态框不会垂直居中到屏幕上,而是在屏幕上方,找了好多资料都没搞定,最终自己试出了一种JS的方法,同时还需要Bootstrap模态框可以拖动,但是发现默认的也不行,翻遍了网络找了出来.现在分享给大家: 原文地址:http://www.panshy.com/articles/201509/webdev-2524.html 以下为Bootstrap模态框拖拽功能的增加方法 $("#myModal&
-
bootstrap实现嵌套模态框的实例代码
项目上有一个需求,需要在已经弹出的一个bootstrap模态框的基础上再弹一个模态框. 因为bootstrap官方不建议这么做,最后实现的过程属实不易. 以下是解决方案: html代码: <div id="container"> <a data-toggle="modal" href="#myModal" rel="external nofollow" class="btn btn-primary&
-
javascript实现移动的模态框效果
本文实例为大家分享了javascript实现移动的模态框效果的具体代码,供大家参考,具体内容如下 页面效果: 点击链接后,弹出登录模态框,点击关闭链接可以关闭模态框,鼠标在模态框标题区域按下后可以拖拽模态框,松开鼠标后,模态框停止移动 实现思路: 1.html.css搭建好页面,设置好模态框内容和样式后,将模态框隐藏:display: none;如果点击弹出模态框后,页面背景色发生改变,可以添加一个遮罩层,将遮罩层也先隐藏 2.给点击后弹出模态框的元素添加点击事件- - -onclick 事件处
-
JavaScript实现可拖动模态框
本文实例为大家分享了JavaScript实现可拖动模态框的具体代码,供大家参考,具体内容如下 代码: HTML代码部分: <style> * { margin: 0px; padding: 0px; } .login-header { width: 100%; text-align: center; height: 30px; font-size: 24px; line-height: 30px; cursor: pointer; } .login { display: none; width
-
bootstrap模态框实现拖拽效果
本文实例为大家分享了bootstrap模态框实现拖拽效果,供大家参考,具体内容如下 项目中用的有点乱,jquery和angularjs一起搞,有些插件用的jquery版本的,有的插件用的ng版本的.搞到现在测试了一轮又一轮,发现modal模态框有限bug,因为层级的问题,modal框会被左侧菜单遮挡,需求就改成将modal框改成可以拖动的. 网上搜了搜,找到个blog发现基本功能是可用的.但是效果不太友好.问题有以下两个 拖动时候背后文字会被选中,很难看 modal模态框会被拖出边框以外,很难看
-
Bootstrap实现模态框效果
一.模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 二.如果想要单独引用该插件的功能,那么您需要引用 modal.js.或者可以引用 bootstrap.js 或压缩版的 bootstrap.min.js 引入之后直接上代码示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8">
-
JavaScript实现模态框拖拽效果
在这里做一个模态框拖曳的案例,在这里要实现的功能有: 1.点击弹出层, 会弹出模态框, 并且显示灰色半透明的遮挡层. 2.点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层. 3.鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动. 4.鼠标松开,可以停止拖动模态框移动. 实现思路为: 点击弹出层, 模态框和遮挡层就会显示出来display:block; 点击关闭按钮,模态框和遮挡层就会隐藏起来 display:none; 在页面中拖拽的原理: 鼠标按下并且移动, 之后松开鼠标
-
Javascript实现登录框拖拽效果
本文实例为大家分享了Javascript实现登录框拖拽效果的具体代码,供大家参考,具体内容如下 需求分析 1.点击弹出登录框 2.在登录框的特定区域可以将登录框拖拽至任意位置 3.可以关闭登录框,并且下一次点击弹出登录框归位 具体实现 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="
-
JS实现模态框拖拽动态效果
本文实例为大家分享了JS实现模态框拖拽的具体代码,供大家参考,具体内容如下 在实现这个案例效果首先我们了解几个属性,offsetLeft.offsetTop,e.pageX,e.pageY;这几个量都掌握以后就可以操作了… 分别解释一下: 1.offsetLeft:指的是返回一个带有定位父元素左边偏移量的值,当然如果需要操作的元素的父元素没有定位,那么它返回的就是距离浏览器最左侧页面的距离.2.offsetTop:指的是返回一个带有定位父元素顶部偏移量的值,当然如果需要操作的元素的父元素没有定位
-
js实现模态框拖拽
本文实例为大家分享了js实现模态框拖拽的具体代码,供大家参考,具体内容如下 效果展示和需求分析 效果展示 需求分析 点击登录后登录表单和遮罩层显示,点击关闭按钮隐藏. 输入密码时可以明文查看或者隐藏. 在表单的头部按下鼠标后可以拖拽表单. 鼠标弹起拖拽结束. 代码分析 HTML 代码 <body> <a href="javascript:;" class="login">登录我的账号</a> <form ac
-
javascript实现登录框拖拽
本文实例为大家分享了javascript实现登录框拖拽的具体代码,供大家参考,具体内容如下 效果: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login-header { widt
-
JavaScript实现简单的拖拽效果
本文实例为大家分享了JavaScript实现简单的拖拽效果的具体代码,供大家参考,具体内容如下 1.先搭架子: * { margin: 0; padding: 0; } p { background: skyblue; text-align: center; } html, body { width: 100%; height: 100%; } .mask { width: 100%; height: 100%; position: fixed; left: 0; top: 0; backgro
-
JavaScript实现的简单拖拽效果
本文实例讲述了JavaScript实现的简单拖拽效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
-
js实现模态框的拖拽效果
本文实例为大家分享了js实现模态框拖拽效果的具体代码,供大家参考,具体内容如下 之前学习js遇到了这样的需求:鼠标按下后,移动鼠标,模态框随鼠标移动,鼠标松开,模态框也不会随鼠标移动.<完整的代码在最后哦> 分析思路: 1.点击弹出层,模态框和遮挡层就会显示出来.display:block2.点击关闭按钮,模态框和遮挡层就会隐藏.display:none 3.在页面中拖拽的步骤:鼠标按下并移动,之后松开鼠标4.触发事件是鼠标按下mousedown,鼠标移动是mousemove,鼠标松开:mou
-
JavaScript实现div的鼠标拖拽效果
本文实例为大家分享了JavaScript实现div鼠标拖拽效果的具体代码,供大家参考,具体内容如下 实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置,实现的前提时div要有一个定位效果,不然的话是移动不了它的. HTML <div class="box"></div> CSS样式 .box { position: absolute; width: 200px; height: 200px; background: re