JS模态框拖拽案例

最新推荐文章于 2025-06-03 18:54:56 发布
最新推荐文章于 2025-06-03 18:54:56 发布
阅读量235 收藏
点赞数
分类专栏： JS 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/LIUYJ520/article/details/126284029
版权

功能

（1）点击弹出则会弹出登录框，并显示背景蒙板
（2）点击关闭则会隐藏登录框，并隐藏背景蒙板
（3）鼠标按下可以拖拽登录框，鼠标松开则停止
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
结果：
在这里插入图片描述

Javascript模拟框拖拽案例详细分析
weixin_46513544的博客
04-05 431
案例分析： 1、点击弹出框，模块框和遮挡层就会显示出来 display:block; 2、点击关闭按钮，模块框和遮挡层就会隐藏出来 3、鼠标在页面中的拖拽原理：鼠标按下并且移动，之后再松开鼠标 4、触发事件为鼠标按下mousedown 鼠标移动mousemove 鼠标弹起mouseup 5、拖拽过程：鼠标移动中，获得最新的值赋给模态框的top和l...
JS之拖动模态框案例
weixin_44703582的博客
01-10 235
效果图： 话不多说，我们直接上代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login-header { width: 100%; text-align: center; .
模态框的拖拽 ( js小案例 )
weixin_45773503的博客
05-30 409
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模态框拖拽</title> <style> .click {
js 拖拽模态框
黄大仙
08-09 198
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> h6, a { padding: 0px; margin: 0px; } .login { d..
模态框拖拽js实现
catbaby1111的博客
04-05 421
模态框拖拽js实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...
JS实现拖拽效果
爱前端的程序媛的博客
03-16 499
拖拽效果也叫模态框，都是表述得同一个效果。 问题描述： 点击链接会弹出一个框框(我这里是登录框)，鼠标点击不松手可以实现拖拽框框移动。点击框上得关闭按钮，可以关闭框。 先来看看效果 这个案例的主要分三部分来完成 1. 点击文字，登陆框的显示和隐藏 2. 鼠标按下，拖拽登陆框移动 3. 鼠标松开，登陆框位置不变了 具体得步骤代码里会有详细得解释得。 这里值得注意得点：鼠标...
模态框拖拽案例
m0_59030524的博客
03-07 435
1. 弹出框，我们也称为模态框。 点击弹出层，会弹出模态框，并且显示灰色半透明的遮挡层。 点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。 鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。 鼠标松开，可以停止拖动模态框移动。 1.1 分析 点击弹出层，模态框和遮挡层就会显示出来 display:block; 点击关闭按钮，模态框和遮挡层就会隐藏起来 display:none; 在页面中拖拽的原理：鼠标按下并且移动，之后松开鼠标 触发事件是鼠标按下 mousedown
bootstrap模态框实现拖拽效果
08-31
在某些情况下，特别是在复杂布局中，模态框可能会被其他元素遮挡，这时就需要实现模态框的拖拽功能，以便用户可以根据需要调整其位置。 在Bootstrap中，模态框默认并不具备拖拽功能。要实现这一效果，通常需要借助...
JS基础-拖动模态框案例
qq_43781887的博客
05-04 668
需要实现的效果： ①点击“点击，弹出登录框”后模态框和遮挡层就会显示出来 ②点击关闭按钮，模态框和遮盖层就会隐藏起来 ③页面拖拽 功能分析： 首先给上面的"点击，弹出登录框"设置点击事件，点击之后就显示遮罩层和模态框，然后给模态框上面的关闭按钮设置点击事件，点击之后就隐藏遮罩层和模态框。然后是拖拽过程，这个过程的实现较为复杂，主要分为下面几步： 1.明确模态框的真正位置是鼠标的坐标减去鼠标在模态框内的坐标。 2.鼠标的坐标通过鼠标按下事件获取，通过e.pageY和e.pageX来获
js实现拖拽模态框三种js代码实现
qq_45766156的博客
03-25 1387
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
js编写拖拽效果
xiao_cheng_的博客
05-06 227
一、js编写拖拽效果 代码如下（示例）： <!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"> &lt
js实现模块对话框的拖动效果
qq_45605535的博客
05-02 223
文章目录效果实现代码实现原理 效果 实现代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1
JS动态效果 之【模态框拖拽效果】
egg_er的博客
12-25 1453
模态框拖拽效果 在实现这个案例效果首先我们了解几个属性，offsetLeft.offsetTop,e.pageX,e.pageY;这几个量都掌握以后就可以操作了… 分别解释一下： offsetLeft：指的是返回一个带有定位父元素左边偏移量的值，当然如果需要操作的元素的父元素没有定位，那么它返回的就是距离浏览器最左侧页面的距离。 offsetTop：指的是返回一个带有定位父元素顶部偏移量的值，当然如果需要操作的元素的父元素没有定位，那么它返回的就是距离浏览器最顶部页面的距离。 e.pageX是指鼠标距离浏
9.JavaScript核心BOM操作学习（界面交互功能）——通过JavaScript实现PC网页特效（如何让盒子水平垂直居中），通过JavaScript完成模态框的实现（有源代码）
getture的博客
08-17 223
7.PC网页特效 ①元素偏移量offset系列 offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等        获得元素远距离带有定位父元素的位置 获取元素自身的大小（宽度、高度） 注意：返回的数值都不带但闻     offset系列属性          el
用JS实现拖拽效果
qq_37855074的博客
11-30 808
知识储备： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; #box { height: 300px; width:
JS中实现拖拽效果
zx1294644276的博客
04-06 956
JS拖拽效果 实现拖拽效果方法：利用JS监听鼠标的三个事件，共同配合来实现这个操作 （鼠标按下事件、鼠标释放事件、鼠标按下移动事件） 实现原理： 使用on来监听事件， 例：onmousedown监听鼠标按下事件；onmousemove监听鼠标移动事件；onmouseup监听鼠标释放事件。 例： 首先设置需要拖拽的元素对象样式：需要设置定位，让它脱离文档流 抒写思路： （1）首先获取到对应元素div...
js实现窗口拖拽效果
kylvia的专栏
03-16 7927
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box { width: 300px; background-color: green; position: absolute; } h2{ width:100% } </style> </
vue3 el-input type=“textarea“ 字体样式 及高度设置
往事知多少？
05-31 582
在Vue 3中，如果你使用的是Element Plus库中的<el-input>组件作为文本域（），你可以通过几种方式来设置字体样式和高度。
JavaScript基础-数组/对象
最新发布
m0_51324570的博客
06-03 891
JavaScript 数组常用方法包括：`forEach`、`map`、等遍历方法，`push`/`pop`、`unshift`/`shift`、`splice` 等修改方法，以及 `slice`、`concat`。对象常用方法有：`Object.keys`、`values`、操作属性，`hasOwnProperty` 检查属性。Map 支持任意类型键的键值对存储，Set 用于存储唯一值。字符串可通过 [...str].reverse().join('') 翻转，用 includes 检查包含。
利用js写一段拖拽模态框的案例
03-27
以下是一段使用原生JavaScript实现拖拽模态框的示例代码： HTML代码： ``` <div class="modal"> <div class="modal-header"> <h3 class="modal-title">Modal Title</h3> <button class="modal-close">x</button> </div> <div class="modal-body"> <p>Modal Content</p> </div> </div> ``` CSS代码： ``` .modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); width: 400px; height: 300px; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #f5f5f5; cursor: move; } .modal-title { margin: 0; } .modal-close { border: none; background-color: transparent; font-size: 20px; font-weight: bold; cursor: pointer; } .modal-body { padding: 10px; } ``` JavaScript代码： ``` var modal = document.querySelector('.modal'); var modalHeader = document.querySelector('.modal-header'); var isDragging = false; var offsetX = 0; var offsetY = 0; modalHeader.addEventListener('mousedown', function(e) { isDragging = true; offsetX = e.offsetX; offsetY = e.offsetY; }); document.addEventListener('mousemove', function(e) { if (isDragging) { modal.style.left = e.pageX - offsetX + 'px'; modal.style.top = e.pageY - offsetY + 'px'; } }); document.addEventListener('mouseup', function() { isDragging = false; }); var modalClose = document.querySelector('.modal-close'); modalClose.addEventListener('click', function() { modal.style.display = 'none'; }); ``` 解释： 1. 首先，我们选择模态框和模态框头部，然后定义一个变量isDragging表示是否正在拖拽，以及变量offsetX和offsetY保存鼠标相对于模态框左上角的偏移量。 2. 当鼠标在模态框头部按下时，设置isDragging为true，并计算offsetX和offsetY。 3. 当鼠标在文档中移动时，如果isDragging为true，则根据鼠标位置和偏移量计算模态框的新位置，并将其应用到模态框上。 4. 当鼠标松开时，将isDragging设置为false。 5. 最后，选择模态框关闭按钮，为其添加一个点击事件，当点击时将模态框隐藏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值