js+css+html点击登录后弹出可拖拽的模态框
Posted 橘猫吃不胖~
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js+css+html点击登录后弹出可拖拽的模态框相关的知识,希望对你有一定的参考价值。
js+css+html点击登录后弹出可拖拽的模态框
1 案例概述
我们经常能在网页上见到,当点击登录之后,就会弹出一个对话框,对话框中输入用户名和密码就可以登录,而且在弹出对话框之后,除了对话框之外的背景都变为灰色,此对话框还可以在页面上进行拖拽。
案例分析设计图:
效果图如下,页面初始样子为:
当点击“登录会员”时,效果图如下:
当鼠标在页面上拖拽时,模态框会移动位置:
点击右上角关闭按钮后,页面回到初始的样子:
2 编写HTML代码
HTML页面包含三个部分,第一是遮罩层,就是弹出对话框时的灰色的背景;第二是弹出的模态框(对话框),这个部分包含了表单、提交按钮以及右上角的关闭按钮;第三是在所有操作之前在页面上显示的文字,即“登录会员”文字。
第一部分:遮罩层
<!-- 遮罩层 -->
<div class="login-bg"></div>
第二部分:登录界面
<!-- 模态对话框 -->
<div class="model">
<form>
<!-- 模态对话框标题 -->
<div class="item1">登录会员</div>
<!-- 模态对话框内容 -->
<div class="item2">
<div class="username">
<label>
用户名:
<input type="text" name="username">
</label>
</div>
<div class="password">
<label>
登陆密码:
<input type="password" name="password">
</label>
</div>
</div>
<!-- 登录按钮 -->
<div class="item1">
<div class="vip">登录会员</div>
</div>
</form>
<!-- 关闭对话框按钮 -->
<div class="close">x</div>
</div>
第三部分:未操作时页面上显示的文字
<!-- 未操作时页面显示的文字 -->
<div class="login-header">登录会员</div>
3 编写CSS代码
在CSS中,我们要为上面的HTML元素设置样式,首先是遮罩层,遮罩层的背景色应该为灰色,宽高应该和整个网页相同,但是如果只是这样设置,效果是显示不出来的,因此需要为它设置绝对定位属性,将其脱离文档流,最后将其先隐藏起来,代码如下:
/* 遮罩层样式 */
.login-bg
width: 100%;
height: 100%;
background-color: #ccc;
position: absolute;
top: 0;
left: 0;
/* 隐藏 */
display: none;
由于隐藏起来效果不可见,因此下面的截图是不加最后一句“display: none;”
时的效果:
然后为模态对话框设置样式,为模态对话框设置合适的宽高和阴影,将其定位到页面中合适的位置,设置鼠标移动到上面时显示移动的标志,最后将其隐藏,代码如下:
/* 为模态对话框设置样式 */
.model
width: 500px;
height: 200px;
box-shadow: 0px 0px 20px #ddd;
/* 更改鼠标箭头的样式 */
cursor: move;
display: none;
/* 设置绝对定位,将其定位到合适的位置 */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
由于隐藏起来效果不可见,因此下面的截图中是未隐藏时的效果,换句话说,display: none;
先不写入上面的代码中,而且在下面对模态框中各种标签的设置中,也先不隐藏,效果如下:
然后对表单元素,也就是<form></form>
元素设置样式,将该元素设置为弹性盒子,方便对表单内部元素进行排列,并且为其设置宽高,代码如下:
/* 为表单元素设置样式 */
form
/* 设置其占满该盒子 */
width: 100%;
height: 100%;
/* 设置为弹性盒子 */
display: flex;
/* 排列方向为竖版排列 */
flex-direction: column;
注:由于.model先没有写入display: none;
,所以才能看见如下效果
接下来为表单标题和按钮item1设置样式,将其设置为弹性盒子,字体设置为粗体,水平居中对齐,垂直居中对齐,然后将其设置为和其他的盒子共同平分垂直的空间,代码如下:
/* 为表单标题和按钮item1设置样式 */
.item1
font-weight: bold;
/* 设置为弹性盒子 */
display: flex;
/* 水平居中对齐 */
justify-content: center;
/* 垂直居中对齐 */
align-items: center;
/* 与其他盒子平分空间 */
flex: 1;
注:由于.model先没有写入display: none;
,所以才能看见如下效果
为输入数据部分设置样式,将其设置为弹性盒子,排列方向为竖版排列,设置与其他盒子平分空间,设置水平居中对齐,代码如下:
/* 为输入数据部分设置样式 */
.item2
display: flex;
/* 设置垂直排列 */
flex-direction: column;
/* 平分空间 */
flex: 1;
/* 页面上显示垂直方向盒子两侧的间隔相同 */
justify-content: space-around;
/* 页面上显示盒子水平居中 */
align-items: center;
注:
1、由于.model先没有写入display: none;
,所以才能看见如下效果
2、原本justify-content
设置的是项目水平对齐方式,align-items
设置的是项目垂直对齐方式,但是由于该盒子设置了flex-direction: column;
,盒子的排列方向变成了竖向,所以盒子水平和垂直的样式相应地发生了方向的改变,justify-content
设置成了项目垂直对齐方式,align-items
设置成了项目水平对齐方式。
接着为盒子的按钮(“登陆会员”)设置样式,为其设置边框与圆角、背景色和内边距,以及字体颜色,代码如下:
/* 为盒子按钮设置样式 */
.vip
border: 1px solid #ccc;
border-radius: 20px;
padding: 3px 40px;
background-color: orange;
color: white;
注:由于.model先没有写入display: none;
,所以才能看见如下效果
到现在可以看出,用户名这一行偏左,因此将其向右移动一点,与下面的登录密码对齐,代码如下:
/* 为用户名那一行设置样式 */
.username
margin-left: 16px;
注:由于.model先没有写入display: none;
,所以才能看见如下效果
接着为右上角的关闭按钮写样式。将其绝对定位到右上角,并且设置为圆形,给它添加一个边框,将它的文字写到正中间,设置背景色以及鼠标的样式,代码如下:
/* 为关闭按钮写入样式 */
.close
width: 20px;
height: 20px;
/* 设置圆角后,该小正方形就显示圆形 */
border-radius: 50%;
background-color: white;
position: absolute;
top: -10px;
right: -10px;
/* 设置边框,便于确认边界 */
border: 1px solid #ccc;
/* 文字水平居中 */
text-align: center;
/* 文字垂直居中 */
line-height: 16px;
cursor: pointer;
注:
1、由于.model先没有写入display: none;
,所以才能看见如下效果;
2、到了这一步,模态框的样式就设置完成了,接下来的代码中.model会加上display: none;
。
为.model加上display: none;
之后,效果如下,页面上只显示“登录会员”四个字:
接下来为这行字设置一个样式,将其设置文字居中20磅,鼠标样式为小手,代码如下:
/* 为登录会员设置样式 */
.login-header
/* 文字水平居中 */
text-align: center;
/* 文字字体放大 */
font-size: 20pt;
/* 设置鼠标样式 */
cursor: pointer;
到这里CSS样式的设置就结束了,接下来是javascript代码设计。
4 编写JavaScript代码
JavaScript部分中,要设计3个部分,第一个部分是当点击页面上的“登录会员”时,页面上会弹出模态框,而且背景为遮罩层;第二个部分是当点击模态框右上角的“X”时,模态框关闭,遮罩层关闭,页面上恢复显示“登录会员”;第三部分是当鼠标移动到模态框上时,可以拖着模态框在页面上来回移动。
首先,获取页面上的元素,本效果涉及到的元素有模态框、遮罩层、右上角“X”以及最初显示的“登录会员”按钮,所以将它们获取出来,代码如下:
//1、获取页面上的元素
let login = document.querySelector(".login-header");//获取“登陆会员”
let bg = document.querySelector(".login-bg");//获取遮罩层
let model = document.querySelector(".model");//获取模态框
let close = document.querySelector(".close");//获取关闭按钮
然后为“登录会员”注册click事件,当点击“登录会员”时,模态框就会弹出来,遮罩层也会弹出来,但是这时模态框的背景色也变成了灰色,因此需要将模态框背景色设置为白色,代码如下:
//2、为“登录会员”添加click事件
login.addEventListener("click", function ()
bg.style.display = "block";//显示遮罩层
model.style.display = "block";//显示模态框
model.style.backgroundColor = "white";//模态框背景色改成白色
)
为关闭按钮添加click事件,当点击关闭时,模态框不显示,遮罩层也不显示,代码如下:
//3、为关闭按钮添加click事件
close.addEventListener("click", function ()
model.style.display = "none";//模态框设置不可见
bg.style.display = "none";//遮罩层设置不可见
)
接下来是精髓部分,为模态框注册鼠标按下的事件,当鼠标在模态框中按下时,可以拖着模态框在页面上移动,代码如下:、
//4、为模态框注册按下鼠标事件(mousedown)
model.addEventListener("mousedown", function (e)
//(1)获取鼠标在模态框中的坐标
let x = e.pageX - model.offsetLeft;//横坐标=鼠标在页面中的横坐标-模态框在页面中的偏移量
let y = e.pageY - model.offsetTop;//纵坐标=鼠标在页面中的纵坐标-模态框在页面中的纵坐标
//(2)定义移动的函数
function move(e)
//模态框在页面中的纵坐标=鼠标在页面中的横坐标-鼠标在模态框中的横坐标
model.style.left = e.pageX - x + "px";
//模态框在页面中的横坐标=鼠标在页面中的纵坐标-鼠标在模态框中的纵坐标
model.style.top = e.pageY - y + "px";
//(3)给文档注册鼠标移动事件
document.addEventListener("mousemove", move);
//(4)给文档注册鼠标弹起事件
document.addEventListener("mouseup", function ()
document.removeEventListener("mousemove", move);
)
)
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>Document</title>
</head>
<style>
/* 遮罩层样式 */
.login-bg
width: 100%;
height: 100%;
background-color: #ccc;
position: absolute;
top: 0;
left: 0;
/* 隐藏 */
display: none;
/* 为模态对话框设置样式 */
.model
width: 500px;
height: 200px;
box-shadow: 0px 0px 20px #ddd;
/* 更改鼠标箭头的样式 */
cursor: move;
display: none;
/* 设置绝对定位,将其定位到合适的位置 */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* 为表单元素设置样式 */
form
/* 设置其占满该盒子 */
width: 100%;
height: 100%;
/* 设置为弹性盒子 */
display: flex;
/* 排列方向为竖版排列 */
flex-direction: column;
/* 为表单标题item1设置样式 */
.item1
font-weight: bold;
/* 设置为弹性盒子 */
display: flex;
/* 水平居中对齐 */
justify-content: center;
/* 垂直居中对齐 */
align-items: center;
/* 与其他盒子平分空间 */
flex: 1;
/* 为输入数据部分设置样式 */
.item2
display: flex;
/* 设置垂直排列 */
flex-direction: column;
/* 平分空间 */
flex: 1;
/* 页面上显示垂直方向盒子两侧的间隔相同 */
justify-content: space-around;
/* 页面上显示盒子水平居中 */
align-items: center;
/* 为盒子按钮设置样式 */
.vip
border: 1px solid #ccc;
border-radius: 20px;
padding: 3px 40px;
background-color: orange;
color: white;
/* 为用户名那一行设置样式 */
.username
margin-left: 16px;
/* 为关闭按钮写入样式 */
.close
width: 20px;
height: 20px;
/* 设置圆角后,该小正方形就显示圆形 */
border-radius: 50%;
background-color: white;
position: absolute;
top: -10px;
right: -10px;
/* 设置边框,便于确认边界 */
border: 1px solid #ccc;
/* 文字水平居中 */
text-align: center;
/* 文字垂直居中 */
line-height: 16px;
cursor: pointer;
/* 为登录会员设置样式 */
.login-header
/* 文字水平居中 */
text-align: center;
/* 文字字体放大 */
font-size: 20pt;
/* 设置鼠标样式 */
cursor: pointer;
</style>
<body>
<!-- 遮罩层 -->
<div class="login-bg"></div>
<!-- 模态对话框 -->
<div class="model">
<form>
<!-- 模态对话框标题 -->
<div class="item1">登录会员</div>
<!-- 模态对话框内容 -->
<div class="item2">
<div class="username">
<label>
用户名:
<input type="text" name="username">
</label>
</div>
<div class="password">
<label>
登陆密码:
<input type="password" name="password">
</label>
</div>
</div>
<!-- 登录按钮 -->
<div class="item1">
<div class="vip">登录会员</div>
</div>
</form>
<!-- 关闭对话框按钮 -->
<div class="close">x</div>
</div>
<!-- 未操作时页面显示的文字 -->
<div class="login-header">登录会员</div>
<script>
//1、获取页面上的元素
let login = document.querySelector(".login-header");//获取“登陆会员”
let bg = document.querySelector(".login-bg");//获取遮罩层
let model = document.querySelector(".model");//获取模态框
let close = document.querySelector(".close");//获取关闭按钮
//2、为“登录会员”添加click事件
login.addEventListener("click", function ()
bg.style.display = "block";//显示遮罩层
model.style.display = "block";//显示模态框
model.style.backgroundColor = "white";//模以上是关于js+css+html点击登录后弹出可拖拽的模态框的主要内容,如果未能解决你的问题,请参考以下文章