js实现拖动模态框效果
本文实例为大家分享了js实现拖动模态框效果的具体代码，供大家参考，具体内容如下
1.实现效果：
点击链接，弹出模态框。点击关闭，关闭模态框。
点击标题部分，可以随意移动模态框的位置。
主要是获取鼠标位置。
2.思路：
3.代码：
<!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>
body {
padding: 0;
margin: 0;
}
.login {
display: none;
position: fixed;
top: 50%;
left:50%;
box-sizing:border-box;
width:400px;
height: 200px;
background-color: pink;
box-shadow: 0px 0px 20px #ddd;
z-index: 9999;
transform: translate(-50%, -50%);
/* 让一个固定定位的盒子 垂直居中 */
}
h4 {
text-align: center;
line-height: 70px;
}
form {
text-align: center;
margin-left: 40px;
}
a {
text-decoration: none;
text-align: center;
}
.finish {
position: absolute;
top:-15px;
right:-15px;
width: 30px;
height: 30px;
border: 1px solid white;
border-radius: 50%;
background-color: white;
font-size: 10px;
line-height: 30px;
}
.login-bg {
display: none;
width: 100%;
height: 100%;
position: fixed;
top:0px;
left: 0px;
background-color: rgba(0,0,0,0.3);
}
.title {
width: 400px;
height: 50px;
cursor: move;
margin-top: -20px;
height: 70px;
}
</style>
</head>
<body>
<div class="bg">
<div class="link"><a href="javascript:;" >点击，弹出登录框</a></div>
<div class="login">
<div class="finish">关闭</div>
<div class = "title"><h4>登录会员</h4></div>
<form action="">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" name="" id="" value="请输入用户名"></td>
</tr>
<tr>
<td>登录密码：</td>
<td><input type="text" name="" id="" value="请输入密码"></td>
</tr>
</table>
<input type="submit" name="" id="" value="登录会员">
</form>
</div>
</div>
<!-- 遮盖层 -->
<div id="bg" class="login-bg"></div>
<script>
var a = document.querySelector('a');
var login = document.querySelector('.login');
var mask = document.querySelector('.login-bg');
var finish = document.querySelector('.finish');
a.addEventListener('click',function() {
login.style.display = 'block';
mask.style.display = 'block';
});
finish.addEventListener('click', function(){
login.style.display = 'none';
mask.style.display = 'none';
})
var title = document.querySelector('.title');
title.addEventListener('mousedown', function(e){
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
// 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值。
document.addEventListener('mousemove', move)
function move(e) {
// 别忘了加单位。
login.style.left = e.pageX - x + 'px';
login.style.top = e.pageY - y + 'px';
}
// 鼠标弹起，让鼠标移动事件停止。
document.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', move);
})
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js实现拖动模态框
模态框,我们也叫弹出框,可以在网易云,京东等之类的网页中看到. 效果如下: 代码思路: 1．点击弹出层,会弹出模态框,并且显示灰色半透明的遮挡层. 2．点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层. 3．鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动. 4．鼠标松开,可以停止拖动模态框移动. 5.在页面中拖拽的原理︰鼠标按下并且移动,之后松开鼠标 6.触发事件是鼠标按下mousedown,鼠标移动mousemove鼠标松开mouseup 7.拖拽过程:鼠标移动过程中,
-
JS实现拖动模态框案例
本文实例为大家分享了JS实现拖动模态框的具体代码,供大家参考,具体内容如下 效果图: 需求分析: 点击登录后登录表单和遮罩层显示,点击关闭按钮隐藏. 输入密码时可以明文查看或者隐藏. 在表单的头部按下鼠标后可以拖拽表单. 鼠标弹起拖拽结束. 话不多说,我们直接上代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <
-
js实现模态框的拖拽效果
本文实例为大家分享了js实现模态框拖拽效果的具体代码,供大家参考,具体内容如下 之前学习js遇到了这样的需求:鼠标按下后,移动鼠标,模态框随鼠标移动,鼠标松开,模态框也不会随鼠标移动.<完整的代码在最后哦> 分析思路: 1.点击弹出层,模态框和遮挡层就会显示出来.display:block2.点击关闭按钮,模态框和遮挡层就会隐藏.display:none 3.在页面中拖拽的步骤:鼠标按下并移动,之后松开鼠标4.触发事件是鼠标按下mousedown,鼠标移动是mousemove,鼠标松开:mou
-
JavaScript实现模态框拖拽效果
在这里做一个模态框拖曳的案例,在这里要实现的功能有: 1.点击弹出层, 会弹出模态框, 并且显示灰色半透明的遮挡层. 2.点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层. 3.鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动. 4.鼠标松开,可以停止拖动模态框移动. 实现思路为: 点击弹出层, 模态框和遮挡层就会显示出来display:block; 点击关闭按钮,模态框和遮挡层就会隐藏起来 display:none; 在页面中拖拽的原理: 鼠标按下并且移动, 之后松开鼠标
-
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
-
js实现拖动模态框效果
本文实例为大家分享了js实现拖动模态框效果的具体代码,供大家参考,具体内容如下 1.实现效果: 点击链接,弹出模态框.点击关闭,关闭模态框. 点击标题部分,可以随意移动模态框的位置. 主要是获取鼠标位置. 2.思路: 3.代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="
-
使用bootstrap插件实现模态框效果
今天我们选择使用著名的 bootstrap 库的模态框插件 modal.js 来实现模态框效果,同时也使大家进一步熟悉 bootstrap 的插件使用. 一. bootstrap 的 js 插件的简单介绍 1.引入 我们在使用 bootstrap 库时,引入的文件 bootstrap.js 或者 bootstrap.min.js 就是 bootstrap的插件文件,这两种文件都集成了 bootstrap 的所有插件,区别在于 *.min.js 是压缩后的版本. 我们在使用 bootstrap 的
-
JS实现简单拖动模态框案例
本文实例为大家分享了JS实现简单拖动模态框的具体代码,供大家参考,具体内容如下 需要实现的效果: ①点击“点击,弹出登录框”后模态框和遮挡层就会显示出来 ②点击关闭按钮,模态框和遮盖层就会隐藏起来 ③页面拖拽 功能分析: 首先给上面的"点击,弹出登录框"设置点击事件,点击之后就显示遮罩层和模态框,然后给模态框上面的关闭按钮设置点击事件,点击之后就隐藏遮罩层和模态框.然后是拖拽过程,这个过程的实现较为复杂,主要分为下面几步: 1.明确模态框的真正位置是鼠标的坐标减去鼠标在模态框内的坐标.
-
JS实现图片点击后出现模态框效果
很多时候我们在浏览图片时,会发现点击图片后,会弹出一个被点击图片的放大图片浮在页面上,占满整个窗口.这就是图片模态框效果. 这个效果可以使用某些js库实现,如bpopupJs.但是在这里我们使用纯js实现,能够更好理解效果原理和实现方法. 一.实现思路 我们点击小图片之后,图片模态框出现,同时图片模态框上有一个关闭按钮和图片的标题. 因此,我们的实现思路就是: 图片模态框有大图片,关闭按钮,图片标题三部分. 将图片模态框隐藏,在点击小图片之后,模态框出现. 点击关闭按钮后,模态框隐藏. 二.HT
-
javascript实现移动的模态框效果
本文实例为大家分享了javascript实现移动的模态框效果的具体代码,供大家参考,具体内容如下 页面效果: 点击链接后,弹出登录模态框,点击关闭链接可以关闭模态框,鼠标在模态框标题区域按下后可以拖拽模态框,松开鼠标后,模态框停止移动 实现思路: 1.html.css搭建好页面,设置好模态框内容和样式后,将模态框隐藏:display: none;如果点击弹出模态框后,页面背景色发生改变,可以添加一个遮罩层,将遮罩层也先隐藏 2.给点击后弹出模态框的元素添加点击事件- - -onclick 事件处
-
JQuery自定义模态框效果
本文实例为大家分享了JQuery自定义模态框效果的具体代码,供大家参考,具体内容如下 重点:基于jQuery ,也可改造成原生模态框 功能: 1.可以自定义模态框的宽高等等一系列css样式:2.关闭.提交都可以执行自定义的回调函数:3.js和html分离,除了部分带了js功能的class不能遗漏之外,其他的都可自行增减 html代码: <div class="dialog-tiya" id="voteModal"> <div class=&
-
JS实现拖动模糊框特效
本文实例为大家分享了JS实现拖动模糊框特效的具体代码,供大家参考,具体内容如下 需求: 在图片上拖动按钮,图片蒙层慢慢覆盖,当蒙层边缘碰到左右下角文字时,文字隐藏. 技术: 监听器,鼠标坐标获取 效果图 源码分享: HTML <h1>Image Comparison Slider</h1> <nav> <!--底层图--> <img src="img/img-original.jpg" alt=""> &l