JS实现简单拖动模态框案例
本文实例为大家分享了JS实现简单拖动模态框的具体代码，供大家参考，具体内容如下
需要实现的效果：
①点击“点击，弹出登录框”后模态框和遮挡层就会显示出来
②点击关闭按钮，模态框和遮盖层就会隐藏起来
③页面拖拽
功能分析：
首先给上面的"点击，弹出登录框"设置点击事件，点击之后就显示遮罩层和模态框，然后给模态框上面的关闭按钮设置点击事件，点击之后就隐藏遮罩层和模态框。然后是拖拽过程，这个过程的实现较为复杂，主要分为下面几步：
1.明确模态框的真正位置是鼠标的坐标减去鼠标在模态框内的坐标。
2.鼠标的坐标通过鼠标按下事件获取，通过e.pageY和e.pageX来获取。
3.按下之后想要获得鼠标在模态框中的坐标（一直都不会变），需要获得盒子的坐标，盒子坐标通过element.offsetTop和element.offsetLeft来获取，通过鼠标的坐标减去模态框的坐标获得鼠标在模态框中的坐标。
4.按下之后鼠标移动，就让模态框的坐标设置称为鼠标的坐标减去鼠标在模态框中的坐标。
5.鼠标松开之后需要停止拖拽，就是移除鼠标移动事件。
完整代码：
<!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>
<script>
window.onload = function() {
var loginbox = document.querySelector('.loginbox');
var gray = document.querySelector('.gray');
var loginheader = document.querySelector('.login-header');
var close = document.querySelector('.close');
var move = document.querySelector('.move');
loginheader.addEventListener('click', function() {
loginbox.style.display = 'block';
gray.style.display = 'block';
});
close.addEventListener('click', function() {
loginbox.style.display = 'none';
gray.style.display = 'none';
});
move.addEventListener('mousedown', function(e) {
// 鼠标在盒子内得距离
var x = e.pageX - loginbox.offsetLeft;
var y = e.pageY - loginbox.offsetTop;
// alert('hahah')
document.addEventListener('mousemove', move)
function move(e) {
loginbox.style.left = e.pageX - x + 'px';
loginbox.style.top = e.pageY - y + 'px';
}
// 鼠标谈起就移除鼠标移动事件
document.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', move)
})
})
}
</script>
<style>
.login-header {
width: 100%;
text-align: center;
height: 30px;
font-size: 24px;
line-height: 30px;
}
.move {
cursor: move;
}
ul,
li,
ol,
dl,
dt,
dd,
div,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
a {
padding: 0px;
margin: 0px;
}
a {
text-decoration: none;
color: #000000;
}
.loginbox {
display: none;
position: absolute;
top: 200px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
width: 520px;
height: 300px;
background-color: #fff;
}
.loginbox .close {
cursor: pointer;
}
.loginbox p {
float: left;
font-size: 22px;
text-align: center;
margin-top: 30px;
margin-left: 240px;
}
.loginbox .content {
float: right;
margin-top: 30px;
margin-right: 70px;
}
.loginbox .content input {
width: 300px;
height: 25px;
outline: none;
border: 1px solid #ccc;
}
.loginbox .btn {
background-color: #fff;
width: 180px;
height: 30px;
border: 1px solid #ccc;
margin-top: 40px;
margin-left: 170px;
}
.loginbox span {
position: absolute;
font-size: 12px;
text-align: center;
line-height: 50px;
z-index: 9999;
top: -25px;
right: -25px;
width: 50px;
height: 50px;
background-color: #fff;
color: #000000;
border-radius: 50%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, .3);
}
.gray {
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:;" rel="external nofollow" >点击，弹出登录框</a></div>
<div class="loginbox">
<p class="move">登录会员</p>
<div class="content">
<label for="">用户名：</label>
<input type="text" placeholder="请输入用户名">
</div>
<div class="content">
<label for="">登录密码：</label>
<input type="password" placeholder="请输入用户名">
</div>
<input type="button" value="登录会员" class="btn">
<span class="close">关闭</span>
</div>
<div class="gray">
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
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实现拖动模态框的具体代码,供大家参考,具体内容如下 效果图: 需求分析: 点击登录后登录表单和遮罩层显示,点击关闭按钮隐藏. 输入密码时可以明文查看或者隐藏. 在表单的头部按下鼠标后可以拖拽表单. 鼠标弹起拖拽结束. 话不多说,我们直接上代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <
-
js实现拖动模态框
模态框,我们也叫弹出框,可以在网易云,京东等之类的网页中看到. 效果如下: 代码思路: 1．点击弹出层,会弹出模态框,并且显示灰色半透明的遮挡层. 2．点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层. 3．鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动. 4．鼠标松开,可以停止拖动模态框移动. 5.在页面中拖拽的原理︰鼠标按下并且移动,之后松开鼠标 6.触发事件是鼠标按下mousedown,鼠标移动mousemove鼠标松开mouseup 7.拖拽过程:鼠标移动过程中,
-
js实现拖动模态框效果
本文实例为大家分享了js实现拖动模态框效果的具体代码,供大家参考,具体内容如下 1.实现效果: 点击链接,弹出模态框.点击关闭,关闭模态框. 点击标题部分,可以随意移动模态框的位置. 主要是获取鼠标位置. 2.思路: 3.代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="
-
JS实现简单拖动模态框案例
本文实例为大家分享了JS实现简单拖动模态框的具体代码,供大家参考,具体内容如下 需要实现的效果: ①点击“点击,弹出登录框”后模态框和遮挡层就会显示出来 ②点击关闭按钮,模态框和遮盖层就会隐藏起来 ③页面拖拽 功能分析: 首先给上面的"点击,弹出登录框"设置点击事件,点击之后就显示遮罩层和模态框,然后给模态框上面的关闭按钮设置点击事件,点击之后就隐藏遮罩层和模态框.然后是拖拽过程,这个过程的实现较为复杂,主要分为下面几步: 1.明确模态框的真正位置是鼠标的坐标减去鼠标在模态框内的坐标.
-
原生js实现简单的模态框示例
html部分: <img src="images/8.jpg" alt=""> <button class="btn" id="showMax">显示大图</button> <div id="modalBox" class="modalBox"> <div class="modalBox-matter"> &
-
Bootstrap模态框案例解析
一.模态框的正常点击出现,如添加功能 <td width="120px"> <button type="button class="btn btn-blue" style="width: 100px;" data-toggle="modal" data-target="#systemAdd">添加</button></td> <!-- 添加的模
-
JavaScript实现拖动模态框
本文实例为大家分享了JavaScript实现拖动模态框的具体代码,供大家参考,具体内容如下 案例:模态框拖拽 弹出框,我们也称为模态框. 1.点击弹出层,会弹出模态框,并且显示灰色半透明的遮挡层.2.点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层.3.鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动.4.鼠标松开,可以停止拖动模态框移动. 案例分析 ①点击弹出层,模态框和遮挡层就会显示出来display:block;②点击关闭按钮,模态框和遮挡层就会隐藏起来display
-
JS实现可移动模态框
本文实例为大家分享了JS实现可移动模态框的具体代码,供大家参考,具体内容如下 点击增加弹出模态框. 这个模态框可以移动的. 由于我写的项目是egg.js前后端分离,需要获取数据库内容,所以以下代码中的{{uh.username}}自己根据实际情况进行修改. 1.首先在前端页面中添加以下代码: <div class="content-top"> <button type="submit" class="open"&
-
js实现类bootstrap模态框动画
在pc端开发,模态框是一个很常用的插件,之前一直用的第三方插件,比如bootstrap,jQuery的模态框插件,最近还用了elementUI的.但是会发现其实动画效果都差不多,那么如何去实现这样一个动画效果呢? 模态框的构成 常见的模态框的结构我们很容易就可以看出,一个遮罩层,还有内容区.内容区主要是头部(包括标题,关闭按钮)和body部分(body中常常会有确认和取消按钮). 布局 1.背景要充满全屏,而且如果页面有滚动,当模态框弹出的时候是无法滚动的: 2.内容区要水平居中显示,至于