关键词：
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实现可拖拽的div
实现一个div可以被拖拽，代码如下所示：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>zzw_drap</title><style>*{margin:0;padding:0;}#box{position:absolute;top:100 查看详情
javascript--结合css变形缩放能拖拽的登录框
上例图：代码块：1<!DOCTYPEhtml>2<html>3<headlang="en">4<metacharset="UTF-8">5<title></title>6<style>7.login-header{8width:100%;9text-align:center;10height:30px;11font 查看详情
弹出框组件，可拖拽
/***弹出框组件*/(function($){varUtils={showMask:function(){var$mask=$("#mask");if($mask.length===0){$(‘body‘).prepend("<divid=‘mask‘class=‘mask‘></div>");}$("#mask").css({width:Math.max(documen 查看详情
js中可拖拽的甘特图和流程图
甘特图：https://www.douban.com/note/441706674/https://www.uedsc.com/jquery-ganttview.htmlhttps://github.com/thegrubbsian/jquery.ganttViewhttp://download.csdn.net/detail/hspeed/5479645http://www.cnblogs.co 查看详情
移动端可拖拽的进度条
原生js 移动端可拖拽的进度条效果图:代码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>干货-课程-完成</title><style>ul.lanren{margin:100pxauto;}.scal 查看详情
使用movable-view制作可拖拽的微信小程序弹出层效果。(代码片段)
...小程序的代码。【如果有侵权联系删除最近做的项目有个弹出层效果，类似音乐播放器那种。按照普通的做了一般感觉交互不是很优雅，设计妹子把潮汐睡眠的弹层给我看了看，感觉做的挺好，于是乘着有空仿照了一下。首先善... 查看详情
jquery点击弹出层，弹出模态框，点击模态框消失
<!DOCTYPEhtml><html><head><title>jQuery弹出层模态框</title><scriptsrc="./jquery.min.js"type="text/javascript"></script><style>.btn{height:100px;}.black_over{d 查看详情
bootstrap如何设置打开页面10秒后弹出模态框的效果请列出详细代码
参考技术A让页面一开始就加载：$(function()$('#myModal').modal(options););追问是打开页面10秒后弹出模态框。 查看详情
jquery点击弹出层，弹出模态框，点击模态框消失
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081<!DOCTYPE html><html><head& 查看详情
jquery点击弹出层，弹出模态框，点击模态框消失
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081<!DOCTYPE html><html><head& 查看详情
zdialog可拖拽弹出层
zDialog弹出框：代替window.open、window.alert、window.confirm；提供良好的用户体验；水晶质感，设计细腻，外观漂亮；兼容ie6/7/8、firefox2/3、Opera；弹出框在ie6下不会被select控件穿透；无外部css文件，引用Dialog.js即可使用；对iframe下的应... 查看详情
编写可拖拽的弹窗(代码片段)
可拖拽的弹窗在刚刚重构完的项目中使用到了elementui框架，踩了不少坑也学到了不少的东西。其中比较麻烦的是它的dialog弹窗组件是无法移动拖拽的，然而客户又强烈的要求一定要有这个功能，所以就自己写了个可拖拽的弹窗组... 查看详情
javascript中有几种模态框
...onfirm：用于弹出带有确认和取消两个选项的对话框，用户点击确认返回true，点击取消返回false。3.prompt：用于弹出一个输入框，用户可以在其中输入信息，并返回用户输入的内容。4.showModalDialog：用于显示模态对话框，与window.open... 查看详情
js仿苹果悬浮可拖拽按钮，并且点击展开效果
今天写了一个仿苹果的悬浮按钮，由于只在右侧展开，所以只能上下拖拽，展开效果入下1.html<divclass="info-nr"id="info-nr"><divid="info-nr-phone"class="info-nr-phone"><sectionid="toMenu"></section><divclass="menu_01"> 查看详情
可拖拽listview基本使用技巧（dragsortlistview）
...stview，DragSortListView这是gitHub上的一个开源项目。链接点击打开链接。这个开源控件主要是为了实现listview的item上下拖拽效果以便达到美化界面的作用。 先来看三张效果图。 第一张为初始的DragSortListView效果图。再来... 查看详情
为bootstrapmodal（模态框）全局添加拖拽操作
在js中绑定方法$(document).on("show.bs.modal",".modal",function(){$(this).draggable({//handle:".modal-header"//只能点击头部拖动});$(this).css("overflow","hidden");//防止出现滚动条，出现的话，你会把滚动条一起拖着走的}); 事件描述示例show.bs. 查看详情
jquery或js关于鼠标单击和拖拽的区别
...emove了不算click 参考技术B鼠标单击，只是一个简单的鼠标点击动作。而鼠标拖拽比鼠标单击要复杂一点，它包含了：鼠标点击、鼠标拖拽、鼠标弹起。另附js拖拽效果的实现原理：大致分为三步：①当鼠标在模态窗体头部点下(mou... 查看详情
bootstrap模态框的使用
...，往数据库添加数据的功能引入css js设置按钮，点击时模态框弹出 开发模态框代码，bootstrap官网上可以复制bootStrap链接：https://v3.bootcss.com/javascript/#modals 注意： 引用在线cdnCSSjs要将在线的引用放在自己写的... 查看详情