目录

一、需求描述

二、实现效果

三、完整代码

四、实现过程

1、HTML 页面结构

2、CSS 元素样式

3、JavaScript动态控制

（1）获取元素

（2）显示\隐藏遮罩层与模态框

（3）实现模态框拖动效果

一、需求描述

实现一个可以拖拽的模态框；

• 点击打开按钮，显示模态框和遮罩层；
• 点击关闭按钮或遮罩层，隐藏模态框和遮罩层；
• 在模态框的标题栏按下并移动鼠标，模态框跟随鼠标移动（拖拽效果）；

二、实现效果

1、点击按钮显示遮罩层和模态框

2、在模态框标题栏按下并移动鼠标，模态框跟随移动

3、点击关闭按钮或者遮罩层隐藏模态框

三、完整代码

【test.html】

                               打开模态框     
     
         
一个可以拖拽的模态框
         
内容区域不能拖到
         
     
    

四、实现过程

1、HTML 页面结构

• 一个按钮【button元素】，用来点击显示模态框和遮罩层；
• 一个遮罩层【div元素】；
• 一个模态框【div元素】，其中包含模态框的标题【div元素】、内容【div元素】和关闭按钮【div元素】；

     打开模态框     
     
         
一个可以拖拽的模态框
         
内容区域不能拖到
         
     
 

2、CSS 元素样式

（1）按钮样式

根据自己的喜好自行添加按钮的样式即可；

.open-btn {     display: inline-block;     margin: 60px;     padding: 10px 20px;     font-size: 16px;     color: #fff;     background-color: #409eff;     border: none;     border-radius: 8px; }

（2）遮罩层样式 

• 先不用设置遮罩层的display为none，先让它显示出来，便于观察；
• 设置遮罩层的宽高分别为 100vw 和 100vh ，占满浏览器的整个窗口（根据浏览器窗口大小自适应，始终占满）；
• 遮罩层使用固定定位【 position: fixed; 】，使其不受其他元素的位置影响；

.mask {     /* display: none; */     position: fixed;     top: 0px;     left: 0px;     width: 100vw;     height: 100vh;     background: rgba(0, 0, 0, .3); }

（3）模态框样式

• 模态框跟遮罩层一样，不用设置display为none；
• 模态框也使用固定定位【 position: fixed; 】，使其不受其他元素的位置影响；
• 模态框的标题设置cursor属性为move，当鼠标移动到模态框的标题位置时，会显示移动样式；
• 模态框的关闭按钮，使用的是div元素，将其定位到模态框的右上角，并设置其背景为svg图标；

.modal-box {     /* display: none; */     position: fixed;     top: 120px;     left: 60px;     width: 400px;     min-height: 200px;     padding: 10px;     background: #fff;     border-radius: 8px;     box-shadow: 0 0 4px 1px #acacac;     z-index: 99999; } .modal-title {     text-align: center;     font-size: 18px;     font-weight: 700;     padding: 20px;     border-bottom: 1px solid #ddd;     cursor: move; }  .modal-body {     margin: 20px 0; }  .close-btn {     position: absolute;     top: 6px;     right: 6px;     width: 18px;     height: 18px;     background-image: url("D:\\test\\close.svg");     background-size: cover; }

3、JavaScript动态控制

（1）获取元素

将页面中需要操作的元素都进行获取；

这里使用的是querySelector()方法来获取元素，是JavaScript中获取dom元素的方式之一；

（2）显示\隐藏遮罩层与模态框

在控制遮罩层和模态框的显示与隐藏之前，需要先将其display属性设为none；

.mask {     display: none;     ...... }  .modal-box {     display: none;     ...... }

根据案例需求，可以知道：

• 遮罩层和模态框的显示与隐藏是同时的，模态框显示则遮罩层显示，模态框隐藏则遮罩层隐藏；
• 当点击【打开模态框】按钮时，进行显示，所以需要给这个按钮注册点击事件，完成相应功能；
• 当点击模态框中的【关闭按钮】或者遮罩层时，进行隐藏，所以需要给关闭按钮和遮罩层都注册鼠标点击事件，完成相应功能；

（3）实现模态框拖动效果

根据案例需求,分析可知：

• 模态框采用的是固定定位【 position: fixed;】，改变其 top 和 left 值就相当于是在移动了；
• 模态框的移动距离实际就是鼠标的移动距离，加上模态框的起始位置坐标；
• 鼠标的移动距离实际就是鼠标按下的位置，与鼠标移动时位置的差值；

注册 mousedown 事件，鼠标按下，得到鼠标在模态框内的坐标，即起始位置；

注册 mousemove 事件，鼠标移动，获得最新的鼠标位置，计算移动距离；

注册 mouseup 事件，鼠标弹起，停止拖拽，解除鼠标移动事件；

注意：

• mousedown 、mousemove 、mouseup 触发的事件源是模态框的标题栏；
• mousemove、mouseup 是在鼠标按下事件的基础上（ 要写到mousedown 事件里面 ）；

=========================================================================

每天进步一点点~！

记录下前端这个一个小知识~~！