Web开发:一个可拖拽的模态框(HTML、CSS、JavaScript)

目录

一、需求描述

二、实现效果

三、完整代码

四、实现过程

1、HTML 页面结构

2、CSS 元素样式

3、JavaScript动态控制

(1)获取元素

(2)显示\隐藏遮罩层与模态框

(3)实现模态框拖动效果


一、需求描述

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

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

二、实现效果

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

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

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

三、完整代码

【test.html】

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>可拖拽的模态框</title><style>* {margin: 0;padding: 0;caret-color: transparent;}.open-btn {display: inline-block;margin: 60px;padding: 10px 20px;font-size: 16px;color: #fff;background-color: #409eff;border: none;border-radius: 8px;}.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;}.mask {display: none;width: 100vw;height: 100vh;position: fixed;top: 0px;left: 0px;background: rgba(0, 0, 0, .3);}</style>
</head><body><button class="open-btn">打开模态框</button><div class="mask"></div><div class="modal-box"><div class="modal-title">一个可以拖拽的模态框</div><div class="modal-body">内容区域不能拖到</div><div class="close-btn" /></div>
</body>
<script>// 获取打开按钮var openBtn = document.querySelector(".open-btn");// 获取模态框var modalBox = document.querySelector(".modal-box");// 获取模态框标题var modalTitle = document.querySelector(".modal-title")// 获取关闭按钮var closeBtn = document.querySelector(".close-btn");// 获取遮罩层var maskBox = document.querySelector(".mask");// 2、显示\隐藏遮罩层与模态框// 2.1、点击打开按钮,显示模态框和遮罩层openBtn.addEventListener('click', function () {maskBox.style.display = "block";modalBox.style.display = "block";})// 2.2、点击关闭按钮 或者遮罩层 隐藏模态框和遮罩层closeBtn.addEventListener('click', function () {maskBox.style.display = "none";modalBox.style.display = "none";})maskBox.addEventListener('click', function () {maskBox.style.display = "none";modalBox.style.display = "none";})// 3、拖动模态框// 3.1 鼠标按下modalTitle.addEventListener('mousedown', function (e) {// 获取鼠标起始位置坐标var mouseX = e.pageX;var mouseY = e.pageY;// 模态框的初始左边距 上边距var modalBoxX = modalBox.offsetLeft;var modalBoxY = modalBox.offsetTop;// 3.2 鼠标移动 计算模态框的移动距离modalTitle.addEventListener('mousemove', moveMouse);// 3.3 鼠标弹起 移除鼠标移动事件modalTitle.addEventListener('mouseup', function () {modalTitle.removeEventListener('mousemove', moveMouse)})// 鼠标移动事件回调function moveMouse(e) {// 模态框移动的边距 = 模态框的起始边距 + 鼠标的相对移动值;modalBox.style.left = modalBoxX + (e.pageX - mouseX) + 'px';modalBox.style.top = modalBoxY + (e.pageY - mouseY) + 'px';}})
</script></html>

四、实现过程

1、HTML 页面结构

  • 一个按钮【button元素】,用来点击显示模态框和遮罩层;
  • 一个遮罩层【div元素】;
  • 一个模态框【div元素】,其中包含模态框的标题【div元素】、内容【div元素】和关闭按钮【div元素】;
<body><button class="open-btn">打开模态框</button><div class="mask"></div><div class="modal-box"><div class="modal-title">一个可以拖拽的模态框</div><div class="modal-body">内容区域不能拖到</div><div class="close-btn" /></div>
</body>

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元素的方式之一;

<script>// 1、获取页面元素// 获取打开按钮var openBtn = document.querySelector(".open-btn");// 获取模态框var modalBox = document.querySelector(".modal-box");// 获取模态框标题var modalTitle = document.querySelector(".modal-title")// 获取关闭按钮var closeBtn = document.querySelector(".close-btn");// 获取遮罩层var maskBox = document.querySelector(".mask");......
</script>

(2)显示\隐藏遮罩层与模态框

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

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

根据案例需求,可以知道:

  • 遮罩层和模态框的显示与隐藏是同时的,模态框显示则遮罩层显示,模态框隐藏则遮罩层隐藏;
  • 当点击【打开模态框】按钮时,进行显示,所以需要给这个按钮注册点击事件,完成相应功能;
  • 当点击模态框中的【关闭按钮】或者遮罩层时,进行隐藏,所以需要给关闭按钮和遮罩层都注册鼠标点击事件,完成相应功能;
<script>......// 2、显示\隐藏遮罩层与模态框// 2.1、点击打开按钮,显示模态框和遮罩层openBtn.addEventListener('click', function () {maskBox.style.display = "block";modalBox.style.display = "block";})// 2.2、点击关闭按钮 或者遮罩层 隐藏模态框和遮罩层closeBtn.addEventListener('click', function () {maskBox.style.display = "none";modalBox.style.display = "none";})maskBox.addEventListener('click', function () {maskBox.style.display = "none";modalBox.style.display = "none";})......
</script>

(3)实现模态框拖动效果

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

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

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

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

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

注意:

  • mousedown 、mousemove 、mouseup 触发的事件源是模态框的标题栏;
  • mousemove、mouseup 是在鼠标按下事件的基础上( 要写到mousedown 事件里面 );
<script>......// 3、拖动模态框// 3.1 鼠标按下modalTitle.addEventListener('mousedown', function (e) {// 获取鼠标起始位置坐标var mouseX = e.pageX;var mouseY = e.pageY;// 模态框的初始左边距 上边距var modalBoxX = modalBox.offsetLeft;var modalBoxY = modalBox.offsetTop;// 3.2 鼠标移动 计算模态框的移动距离modalTitle.addEventListener('mousemove', moveMouse);// 3.3 鼠标弹起 移除鼠标移动事件modalTitle.addEventListener('mouseup', function() {modalTitle.removeEventListener('mousemove', moveMouse)})// 鼠标移动事件回调function moveMouse(e) {// 模态框移动的边距 = 模态框的起始边距 + 鼠标的相对移动值;modalBox.style.left = modalBoxX + (e.pageX - mouseX) + 'px';modalBox.style.top = modalBoxY + (e.pageY - mouseY) + 'px';}})
</script>

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

每天进步一点点~!

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/47554.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

增长新引擎,构建基于 CDP 的用户运营竞争力

本文将围绕“企业如何通过构建基于 CDP 的用户运营体系提升业务增长”这一核心&#xff0c;详细介绍企业数据化运营现状&#xff0c;拆解用户运营目标&#xff0c;展示神策 CDP 的关键能力以及用户运营策略落地的完整路径。 一、洞察&#xff1a;企业数据化运营面临的挑战 当前…

C语言-网络编程-UDP通信创建流程

UDP 通信创建流程 UDP 是⼀个传输层的⽆连接的协议&#xff0c;我们编写代码⼀般是分为两个端。⼀个我们称之为发送端&#xff0c;另⼀ 个我们称之为接收端。正常⼀般是接收端先运⾏&#xff0c;然后等待结束发送端发送过来的数据。 创建套接字 首先&#xff0c;我们需要创建…

四、GD32 MCU 常见外设介绍 (5) TIMER 模块介绍

5.1.TIMER 基础知识 TIMER分高级定时器&#xff0c;通用定时器L0&#xff0c;L1&#xff0c;L2和基本定时器。 5.2.硬件连接说明 TIMER 属于片内外设&#xff0c;对于外部硬件设计&#xff0c;只需要单独IO口外接信号线即可。 5.3.GD32 TIMER 外设原理简介&#xff08;以 G…

/秋招突击——7/21——复习{堆——数组中的第K大元素}——新作{回溯——全排列、子集、电话号码的字母组合、组合总和、括号生成}

文章目录 引言复习数组中的第K大的最大元素复习实现参考实现 新作回溯模板46 全排列个人实现参考实现 子集个人实现参考实现 电话号码的字母组合复习实现 组合总和个人实现参考实现 括号生成复习实现 总结 引言 昨天的科大讯飞笔试做的稀烂&#xff0c;今天回来好好练习一下&a…

JUC并发编程02-常见方法

start方法与run方法 直接调用run方法-》主线程实现&#xff0c;并不会启动一个新线程。多次调用start方法-》会抛出非法线程异常的错&#xff0c;当线程变成了runnable状态就不能用start方法了。 sleep方法与yield方法 调用sleep会让当前线程从running进入 timed waiting状态…

测试——Junit

内容大纲: 常用的五个注解 测试用例顺序指定 参数化 测试套件 断言 1. 常用的五个注解 1.1 Test 通常情况下,我们输入要写在main方法下,此时我想直接输出: Test void Test01(){System.out.println("第一个测试用例"); } 1.2 BeforeAll AfterAll BeforeALL在Tes…

RK3568笔记四十一:DHT11驱动开发测试

若该文为原创文章&#xff0c;转载请注明原文出处。 记录开发单总线&#xff0c;读取DHT11温湿度 一、DHT11介绍 DHT11是串行接口&#xff08;单线双向&#xff09;DATA 用于微处理器与 DHT11之间的通讯和同步&#xff0c;采用单总线数据格式&#xff0c;一次通讯时间4ms左右…

利用一维数组计算今天是今年的第几天

分析&#xff1a; 在一维数组里初始化12个月份&#xff0c;在进行判断是不是闰年&#xff0c;是闰年就把数组的二月的下标改为29&#xff0c;否则不变就按照平年计算&#xff0c;最后把想要计算的月份减1累加到sum里&#xff0c;在进行计算该月份的天也要累加。例如&#xff1a…

神经网络处理器模拟器的一点思考

一 神经网络处理器 通常基于FPGA的神经网络处理器进行部署某种网络&#xff0c;考虑的因素较多&#xff0c;具体包括网络模型的不同&#xff0c;涵盖不同的算子、激活函数、调度策略等等&#xff1b;具体硬件实现&#xff0c;涉及神经网络处理器并行度、硬件资源消耗&#xff0…

java高级——Collection集合之Set探索(底层为HashMap实现)

java高级——Collection集合之Set探索 前情提要文章介绍继承结构底层代码&#xff08;一张图你就悟了&#xff09;下期预告 前情提要 上一篇文章我们探索了HashMap&#xff0c;详细解说了哈希冲突&#xff0c;红黑树以及Map底层到底是怎么实现的&#xff0c;这一篇我们简单说一…

图像生成(Text-to-Image)发展脉络

这篇博客对 图像生成&#xff08;image generation&#xff09; 领域的经典工作发展进行了梳理&#xff0c;包括重要的一些改进&#xff0c;目的是帮助读者对此领域有一个整体的发展方向把握&#xff0c;并非是对每个工作的详细介绍。 脉络发展&#xff08;时间顺序&#xff0…

气膜工业仓储与气膜体育馆的配置区别—轻空间

气膜工业仓储和气膜体育馆在配置上有明显的区别&#xff0c;这主要是由于它们的使用功能和环境不同所导致的。 结构设计 气膜工业仓储&#xff1a; 主要设计为大跨度、大空间&#xff0c;以便容纳大量货物。 气膜体育馆&#xff1a; 设计注重支撑观众席、运动场地和相关设施&…

Golang | Leetcode Golang题解之第274题H指数

题目&#xff1a; 题解&#xff1a; func hIndex(citations []int) int {// 答案最多只能到数组长度left,right:0,len(citations)var mid intfor left<right{// 1 防止死循环mid(leftright1)>>1cnt:0for _,v:range citations{if v>mid{cnt}}if cnt>mid{// 要找…

One-Class SVM

前提知识&#xff1a;支持向量机&#xff08;SVM&#xff09;-CSDN博客 主要思想 找一个超平面将样本中的正例圈出来&#xff0c;预测就是用这个超平面做决策&#xff0c;在圈内的样本就认为是正样本&#xff0c;圈外的是其他样本&#xff0c;如图1所示&#xff1a; 图1 OSVM…

完整创建一个vite前端项目

目录 1.先创建一个vite项目 2.下载第三方依赖 ① 安装路由vue-router ② 安装vuex全局数据管理 ③ 安装element-plus ④ 安装element-plus图标 ⑤ 安装axios发送请求 ⑥ 完整main.js代码模板 3.开发组件 4.登陆页面开发用例 5. 完整项目代码 废话少说&#xff0c;直接…

【C#】| 与 及其相关例子

按位或&#xff08;|&#xff09; 按位或运算符 | 对两个数的每一位进行比较&#xff0c;如果两个数中至少有一个为 1&#xff0c;则结果位为 1&#xff1b;否则&#xff0c;结果位为0。 1010 (10 in decimal) | 1100 (12 in decimal) ------1110 (14 in decimal) 力扣相关…

【MySQL进阶之路 | 高级篇】EXPLAIN的进一步使用

1. EXPLAIN的四种输出格式 EXPLAIN可以输出四种格式&#xff1a;传统格式&#xff0c;JSON格式&#xff0c;TREE格式以及可视化输出。用户可以根据需要选择使用于自己的格式。 1). 传统格式 传统格式简单明了&#xff0c;输出是一个表格形式。 2). JSON格式 第一种格式中介…

面向对象练习题

代码&#xff1a; public class LL {public static void main(String[] args) { Teacher tnew Teacher("Mike",32,"前端页面",20000);Professor P new Professor("Jack",58,"嵌入式开发",20000);pro p new pro("Bob",34,&q…

【规范】小程序发布,『小程序隐私保护指引』填写指南

前言 &#x1f34a;缘由 『小程序隐私保护指引』小程序发布&#xff0c;每次都躲不开&#xff01; &#x1f3c0;事情起因&#xff1a; 最近在帮朋友弄一个小项目&#xff0c;uniappunicloud壁纸小程序。虽然之前做过不少小程序&#xff0c;但是每次发布正式版本时都有一步『…

WSL的安装

&#x1f3bc;个人主页&#xff1a;金灰 &#x1f60e;作者简介:一名简单的大一学生;易编橙终身成长社群的嘉宾.✨ 专注网络空间安全服务,期待与您的交流分享~ 感谢您的点赞、关注、评论、收藏、是对我最大的认可和支持&#xff01;❤️ &#x1f34a;易编橙终身成长社群&#…