模态框拖拽

article/2025/8/19 0:54:27

1、点击弹出层，回弹出模态框，并且显示半透明的遮挡层

2、点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层

3、鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动

4、鼠标松开，可以停止拖动模态框移动

鼠标放到最上面一行的时候，变成十字形状 load.style.cursor = 'move';

主要是拖动效果的实现

在页面中拖拽的过程：鼠标按下（mousedown）并且移动（mosemove）（怎么实现两个事件必须同时发生--鼠标移动事件写在鼠标按下事件的里面），之后松开鼠标（moseup）      ？？？？？

拖拽过程：鼠标在移动过程中，获得最新的值赋值给模态框的left和top值（自己未用到），这样模态就可以跟着鼠标走了

<!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><style>h1 {margin: 0 auto;text-align: center;}.box {display: none;background-color: white;width: 500px;height: 200px;position: relative;margin: auto}.box p {font-size: 20px;text-align: center;padding-top: 10px}table {text-align: right;}input {width: 360px;height: 30px}button {width: 200px;height: 40px;background-color: white;border: 1px solid rgb(204, 195, 195);margin-left: 140px;margin-top: 10px}.yuan {border-radius: 40px 40px;width: 40px;height: 40px;text-align: center;line-height: 40px;position: absolute;top: -20px;left: 480px;background-color: white;}</style>
</head><body><h1>点击，弹出登录框</h1><div class="box"><p class="load">登录会员</p><form action=""><table><tr><td>用户名：</td><td><input type="text" placeholder="请输入用户名"></td></tr><tr><td>登录密码：</td><td> <input type="password" placeholder="请输入登录密码"></td></tr></table></form><button>登录会员</button><!-- 按钮写在表单域里面的话，相当于提交表单，按下按钮，box盒子也会消失？？ --><div class="yuan">关闭</div></div><script>//点击登录框，整个body颜色变灰var h1 = document.querySelector('h1')var body = document.bodyvar box = document.querySelector('.box')var off = document.querySelector('.yuan')h1.addEventListener('click', function() {body.style.backgroundColor = 'grey'// body.style.backgroun = ' rbga(0, 0, 0, 0.3)'//点击登录框，弹出模态框box.style.display = 'block'})//点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层off.addEventListener('click', function() {box.style.display = 'none';body.style.backgroundColor = ''})//当鼠标当道模态框上面一行是，可以按住鼠标拖拽模态框在页面中移动            margin-left: 200px; margin-top: 200px 修改模态框相对于页面的位置var load = document.querySelector('.load')load.addEventListener('mouseover', function() {load.style.cursor = 'move';load.addEventListener('mousedown', function() {//怎么让盒子跟随鼠标移动load.addEventListener('mousemove', function(e) {/* 后面JS设计的时候就只能实现x轴的移动 */box.style.marginLeft = e.pageX - 250 + 'px'box.style.marginTop = e.pageY - 100 + 'px'})})})</script>
</body></html>

拖拽那边自己无法实现：主要是box盒子的css设置就出了问题；明天再试试

margin：改变的是盒子与盒子之间的距离

鼠标按下：首先获得其相对于盒子的坐标

然后鼠标移动：由于要保持鼠标相对于盒子的坐标不变（可以根据这个原理，列写等式，然后把关系弄清楚），那么盒子就需要移动

    <div class="box"><h1>登录会员</h1></div><script>var h1 = document.querySelector('h1')var div = document.querySelector('.box')//当鼠标放在h1上时，变成十字// h1.addEventListener('mouseover', function() {//     this.style.cursor = 'move'//         // h1.addEventListener('mousedown', function() {// })h1.addEventListener('mouseover', function() {this.style.cursor = 'move'})h1.addEventListener('mousedown', function(e1) {var x1 = e1.pageX - div.offsetLeft //多画画  获取元素的位置多用offset，更改元素的位置多用stylevar y1 = e1.pageY - div.offsetToph1.addEventListener('mousemove', fn)h1.addEventListener('mouseup', function() {h1.removeEventListener('mousemove', fn) //移除函数的话，就需要函数名称，因此前面就不能使用匿名函数  注意写法 移除的应该是整个mousedown事件})function fn(e2) {div.style.left = e2.pageX - x1 + 'px'div.style.top = e2.pageY - y1 + 'px'}})// })</script><style>.box {width: 200px;height: 100px;background-color: pink;border: 1px solid red;position: absolute;}</style>

根据原理，对最开始的程序做出修改：

   <script>//点击登录框，整个body颜色变灰var h1 = document.querySelector('h1')var body = document.bodyvar box = document.querySelector('.box')var off = document.querySelector('.yuan')h1.addEventListener('click', function() {body.style.backgroundColor = 'grey'// body.style.backgroun = ' rbga(0, 0, 0, 0.3)'//点击登录框，弹出模态框box.style.display = 'block'})//点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层off.addEventListener('click', function() {box.style.display = 'none';body.style.backgroundColor = ''})//当鼠标当道模态框上面一行是，可以按住鼠标拖拽模态框在页面中移动            margin-left: 200px; margin-top: 200px 修改模态框相对于页面的位置var load = document.querySelector('.load')load.addEventListener('mouseover', function() {load.style.cursor = 'move';})load.addEventListener('mousedown', function(e1) {var x1 = e1.pageX - box.offsetLeft //多画画  获取元素的位置多用offset，更改元素的位置多用stylevar y1 = e1.pageY - box.offsetTop//怎么让盒子跟随鼠标移动load.addEventListener('mousemove', fn)load.addEventListener('mouseup', function() {load.removeEventListener('mousemove', fn) //移除函数的话，就需要函数名称，因此前面就不能使用匿名函数  注意写法 移除的应该是整个mousedown事件})function fn(e) {/* 后面JS设计的时候就只能实现x轴的移动 */box.style.marginLeft = e.pageX - x1 + 'px'box.style.marginTop = e.pageY - y1 - 43 + 'px'   //减43是因为上面的h1高度为41.6px左右}})</script>

 

<!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><style>.box {display: none;width: 400px;height: 240px;background-color: white;position: absolute;top: 50px;left: 30px}.mention {text-align: center;width: 400px;height: 50px;line-height: 50px;position: relative;}.mention p {font-size: 20px;margin: 0px}.off {width: 40px;height: 40px;border-radius: 40px 40px;position: absolute;top: -20px;right: -20px;font-size: 14px;border: none;background-color: white;}.name,.password {width: 300px;height: 50px;}.name span,.password span {width: 100px;text-align: right;display: inline-block;}input {height: 30px;width: 250px}.sub {background-color: white;border: 1px solid grey;margin-left: 130px;width: 220px;height: 40px;font-size: 17px;margin-top: 20px;border: 1px solid rgb(151, 147, 147)}h1 {text-align: center;}</style>
</head><body><div class="box1"><h1>点击，弹出登录框</h1><div class="box"><div class="mention"><p class="wenz"> 登录会员</p><button class="off">关闭 </button></div><form action=""><div class="name"><span>用户名：</span> <span><input type="text" placeholder="请输入用户名"></span></div><div class="password"><span>    登录密码：</span><span> <input type="text" placeholder="请输入登录密码"></span></div><input type="submit" name="" id="" value="登录会员" class="sub"></form></div></div><script>var h1 = document.querySelector('h1')//点击h1背景色变灰，登录框弹出var body = document.bodyvar box = document.querySelector('.box')h1.addEventListener('click', function() {body.style.backgroundColor = 'grey'box.style.display = 'block'})//点击关闭按钮 背景恢复，关闭登录框var off = document.querySelector('.off')off.addEventListener('click', function() {body.style.backgroundColor = ''box.style.display = 'none'})//鼠标放在登录会员上的时候，箭头变成移动形状var wenz = document.querySelector('.wenz')wenz.addEventListener('mouseover', function() {this.style.cursor = 'move'})//鼠标点击，获得点击时候相对于box个盒子的坐标wenz.addEventListener('mousedown', function(e) {var x = e.pageX - box.offsetLeftvar y = e.pageY - box.offsetTop//鼠标点击之后，再鼠标移动，来更改box盒子相对于页面的位置，保证移动后的鼠标相对于盒子的坐标是不变的wenz.addEventListener('mousemove', fn)function fn(e2) {box.style.top = e2.pageY - y + 'px'box.style.left = e2.pageX - x + 'px'}//鼠标松开后，删除移动事件wenz.addEventListener('mouseup', function() {wenz.removeEventListener('mousemove', fn)})})</script>
</body></html>

终于完成，在CSS样式哪里还要多练习


http://chatgpt.dhexx.cn/article/P1UTHHcU.shtml

相关文章

模态框案例

模态框案例

模态框 模态框在很多网站是很常见的&#xff0c;比如网易云音乐登录&#xff0c;百度登录等网站。 网易云音乐如图&#xff1a; 让我们来看看代码吧&#xff01;&#xff01;注意&#xff1a;这里为了更好的演示效果&#xff0c;增加了遮挡层。 HTML部分&#xff1a; <!-- …
阅读更多...
零基础Bootstrap入门教程(16)--模态框

零基础Bootstrap入门教程(16)--模态框

点此查看 所有教程、项目、源码导航 本文目录 1. 概述2. 模态框样式3. 按钮直接关联模态框4. 通过JS方法打开/关闭模态框5. 调整大小6. 动画效果7. 小结 1. 概述 模态框这个名字有点高雅了&#xff0c;其实就是对话框&#xff0c;用来弹出一个新的界面。 模态框的使用非常的场…
阅读更多...
模态框

模态框

模态对话框&#xff08;Modal Dialogue Box&#xff0c;又叫做模式对话框&#xff09;&#xff0c;是指在用户想要对对话框以外的应用程序进行操作时&#xff0c;必须首先对该对话框进行响应 摘自百度百科 先放上效果图&#xff1a; 基本功能为点击窗口中间的发光按钮&#xff…
阅读更多...
HTML+CSS+JavaScript实现模态框（可拖拽）

HTML+CSS+JavaScript实现模态框（可拖拽）

前言 模态框是指覆盖在父窗口上的子窗口&#xff0c;但在HTML网页中&#xff0c;并没有父窗口和子窗口的概念。这里是通过可隐藏的遮罩层和一个可隐藏的盒子来实现模态框的效果。 效果演示&#xff1a; 下面开始详细介绍如何实现一个可拖拽的模态框。只对 JS 部分详解&#x…
阅读更多...
Bootstrap系列之模态框（Modal）

Bootstrap系列之模态框（Modal）

文章の目录 1、工作原理2、示例2.1、Modal组件2.2、在线演示2.3、静态背景2.4、滚动内容2.5、垂直居中2.6、提示和弹窗2.7、使用网格2.8、不同模态框的内容2.9、改变动画2.10、移除动画2.11、动态高度2.12、Accessibility2.13、嵌入YouTube视频 3、Optional sizes4、用法4.1、通…
阅读更多...
Oracle数据迁移

Oracle数据迁移

本文主要提及使用exp,imp以及Oracle数据泵等工具如何进行数据迁移&#xff1a; 一、数据迁移工具 1、数据迁移工具 &#xff08;1&#xff09;数据泵 &#xff08;2&#xff09;外部表&#xff1a;external table &#xff08;3&#xff09;数据加载工具&#xff1a;sqllo…
阅读更多...
MySQL数据库- 几种数据迁移的方法详解都在这了！看完必懂

MySQL数据库- 几种数据迁移的方法详解都在这了！看完必懂

数据迁移的几种方式 - MySQL数据库 本文关键字&#xff1a;MySQL、数据库、数据迁移、导入、导出 文章目录 数据迁移的几种方式 - MySQL数据库 一、数据迁移 1. 数据的生命周期2. 数据迁移的发生二、数据导出 1. 命令方式2. 软件方式三、数据导入 1. 命令方式2. 软件方式四、…
阅读更多...
数据迁移方法

数据迁移方法

在我的《高并发系统设计目标之可扩展性》博文中提到&#xff0c;随着业务的发展&#xff0c;我们会沿着AKF的Y轴进行微服务化的改造。但是沿着Y轴的重构过程中往往涉及到分库分表。那么这时就需要进行数据库的迁移了。沿着AKF的Z轴也类似&#xff0c;那么迁移有什么原则呢&…
阅读更多...
如何高效地进行大规模数据迁移？

如何高效地进行大规模数据迁移？

导读 我们在做一次系统业务模型重构的时候&#xff0c;往往会遇到把旧模型表中的数据迁移到新模型表中&#xff0c;如果这时候&#xff0c;我们旧表中的数据规模已达到千万级以上&#xff0c;那么&#xff0c;这个从旧表迁移到新表的过程会非常漫长&#xff0c;而业务仍需快速推…
阅读更多...
电脑数据怎么迁移？

电脑数据怎么迁移？

“最近我的电脑越来越卡&#xff0c;运行程序时还会出现卡死奔溃的现象&#xff0c;陪伴我多年的电脑到了退休的时候了。购买了一台新款的笔记本电脑&#xff0c;打开软件运行多么的流畅&#xff0c;别提多高兴了&#xff01;可是&#xff0c;我想把旧电脑的数据导入到新电脑怎…
阅读更多...
数据库整体迁移

数据库整体迁移

1.迁移方法概述: 使用Navicat Premium 分别与源数据库和目标数据库建立连接,然后借助Navicat Premium自带的数据传输功能,实现Oracle数据库的迁移.其实跟从MySQL数据库迁移到oracle数据库是一个套路. O(∩_∩)O~ 听起来,是不是很简单,其实就是很简单!下边我就讲一下具体实现的细…
阅读更多...
数据库迁移的方法

数据库迁移的方法

数据库迁移的方法 我们今天以mysql为例&#xff0c;讲讲数据库迁移的四种方法。 1、将数据库倒出为sql文件&#xff0c;再重新导入&#xff08;推荐&#xff09;。 首先将mysql数据库锁定&#xff0c;并将内存中的数据写入磁盘。 flush tables with read lock ; 用mysqldump将t…
阅读更多...
数据迁移——技术选型

数据迁移——技术选型

日常我们在开发中&#xff0c;随着业务需求的变更&#xff0c;重构系统是很常见的事情。重构系统常见的一个场景是变更底层数据模型与存储结构。这种情况下就要对数据进行迁移&#xff0c;从而使业务能正常运行。 背景如下&#xff1a;老系统中使用了mongo数据库&#xff0c;由…
阅读更多...
Oracle数据迁移MySQL

Oracle数据迁移MySQL

前言: 现今&#xff0c;Oracle数据迁移MySQL的需求已经越来越普遍&#xff0c;主要的迁移场景大致可以分为三类&#xff0c;第一类是涉及小表以及少量表的一次性迁移&#xff0c;无需进行增量同步&#xff0c;第二类是涉及大表以及多表的一次性迁移&#xff0c;第三类是涉及增…
阅读更多...
电脑之间如何迁移数据？数据迁移方法描述

电脑之间如何迁移数据？数据迁移方法描述

电脑之间如何迁移数据&#xff1f;当更换电脑时&#xff0c;很多人需要做的第一件事&#xff0c;就是将旧电脑的数据通过外置存储设备等拷贝到新电脑上&#xff0c;并且还要在新电脑上重新安装应用程序&#xff0c;步骤繁琐&#xff0c;耗费了大量的时间和精力不说&#xff0c;…
阅读更多...
DB数据迁移方案

DB数据迁移方案

互联网系统&#xff0c;经常会有数据迁移的需求。系统从机房迁移到云平台&#xff0c;从一个云平台迁移到另一个云平台&#xff0c;系统重构后表结构发生了变化&#xff0c;分库分表&#xff0c;更换数据库选型等等&#xff0c;很多场景都需要迁移数据。 在互联网行业&#xf…
阅读更多...
【OceanBase】四种不同的数据迁移方式

【OceanBase】四种不同的数据迁移方式

前言 OceanBase 已连续 9 年稳定支撑双 11&#xff0c;创新推出“三地五中心”城市级容灾新标准&#xff0c;在被誉为“数据库世界杯”的 TPC-C 和 TPC-H 测试上都刷新了世界纪录。自研一体化架构&#xff0c;兼顾分布式架构的扩展性与集中式架构的性能优势&#xff0c;用一套…
阅读更多...
数据迁移介绍

数据迁移介绍

数据迁移方案 数据迁移框架有几个比较有名应用比较广泛的开源项目&#xff1a;阿里datax&#xff0c;apache sqoop以及Pentaho kettle。这三个框架整体上工作原理类似&#xff0c;下面介绍阿里datax数据迁移框架。 对旧系统进行了重构&#xff0c;就需要把原来的数据迁移到新数…
阅读更多...
代码技巧——数据迁移方案【建议收藏】

代码技巧——数据迁移方案【建议收藏】

开发工作中&#xff0c;可能会遇到如"大表拆分"、"跨库数据迁移"等场景&#xff0c;本文介绍互联网常见架构下的数据迁移方案及实现&#xff1b; 1. 数据迁移的业务场景 以下是需要数据迁移的场景业务场景&#xff1b; 1.1 大表拆分 由于历史原因&…
阅读更多...
【Pytorch】Label Smoothing

【Pytorch】Label Smoothing

理论介绍可以参考 【Inception-v3】《Rethinking the Inception Architecture for Computer Vision》 中的 4.5 Model Regularization via Label Smoothing 本质就是用右边&#xff08;意会下就行&#xff09;的标签替换左边的 one-hot 编码形式&#xff0c;让网络别那么愤青&…
阅读更多...
推荐文章

Copyright @ 2022~2023