模态框拖拽案例分析--元素偏移量 offset 系列
弹出框，我们也称为模态框。
模态框拖拽案例分析:
（1）点击弹出层， 会弹出模态框， 并且显示灰色半透明的遮挡层。
（2）点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。
（3）鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。
（4）鼠标松开，可以停止拖动模态框移动。
1 <!DOCTYPE html>
2 <html lang="zh">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title></title>
8 <style>
9 *{
10 padding:0;
11 margin:0;
12 }
13 .btn_a{
14 width:100%;
15 text-align:center;
16 height:30px;
17 line-height:30px;
18 font-size:24px;
19 }
20 a{
21 text-decoration: none;
22 color:#000;
23 }
24 .login{
25 display:none;
26 position:absolute;
27 width: 512px;
28 height: 280px;
29 border:1px solid #ebebeb;
30 background-color: #fff;
31 top:0;
32 right:0;
33 bottom:0;
34 left:0;
35 margin:auto;
36 padding-right:100px;
37 z-index:9999;
38 }
39
40 .login-title{
41 margin:10px 0 0 0;
42 text-align:center;
43 line-height:40px;
44 height:40px;
45 font-size:18px;
46 position:relative;
47 cursor:move;
48 }
49 .login-title span{
50 position:absolute;
51 top:-30px;
52 right:-110px;
53 font-size:12px;
54 background-color: #fff;
55 border:1px solid #EBEBEB;
56 width:40px;
57 height:40px;
58 border-radius: 20px;
59 }
60 .login-input-content input{
61 float:left;
62 width:350px;
63 height:35px;
64 border:1px solid #EBEBEB;
65 font-size:14px;
66 line-height:35px;
67 color:#999;
68 margin-top:20px;
69 text-indent:5px;
70
71 }
72 .login-input-content{
73 overflow: hidden;
74 margin: 0px 0px 20px 0px;
75 }
76 .login-input-content label{
77 float:left;
78 width:90px;
79 padding-right:10px;
80 text-align:right;
81 line-height: 35px;
82 height:35px;
83 font-size:14px;
84 margin-top:20px;
85 }
86 .login-button{
87 width: 50%;
88 margin: 30px auto 0px auto;
89 line-height: 40px;
90 font-size: 14px;
91 border: #ebebeb 1px solid;
92 text-align: center;
93 }
94 .login-button a{
95 display:block;
96 }
97 .login-bg{
98 display:none;
99 width: 100%;
100 height: 100%;
101 position:fixed;
102 top:0px;
103 left:0px;
104 background: rgba(0,0,0,.3);
105 }
106 </style>
107 </head>
108 <body>
109 <div class=btn_a>
110 <a id='link' href="javascript:;" >点击，弹出登录框</a>
111 </div>
112 <div id='login' class='login'>
113 <div id='title' class='login-title'>
114 登录会员
115 <span><a href="javascript:void(0);" id='closebtn' class='close-login'>关闭</a></span>
116 </div>
117 <div class='login-input-content'>
118 <div class='login-input'>
119 <label for=""> 用户名:</label>
120 <input name='info[username]'type="text" placeholder="请输入用户名" class='list-input' id='username'>
121 </div>
122 <div>
123 <label for="">登录密码:</label>
124 <input name='info[password]' type="password" placeholder="请输入登录密码" class="list-input" id='password'>
125 </div>
126 </div>
127 <div class='login-button' id='loginBtn'>
128 <a href="javascript:;" id="login-button-submit">登录会员</a>
129 </div>
130 </div>
131 <div id='bg' class="login-bg" ></div>
132 </body>
133 <script>
134 var btn_a=document.getElementById('link');
135 var login=document.querySelector('.login');
136 var mask=document.querySelector('.login-bg')
137 var closebtn=document.querySelector('.close-login');
138 var title=document.querySelector('#title');
139 btn_a.addEventListener('click',function(){
140 login.style.display='block';
141 mask.style.display='block';
142 })
143 closebtn.addEventListener('click',function(){
144 login.style.display='none';
145 mask.style.display='none';
146 })
147 title.addEventListener('mousedown',function(e){
148 var x=e.pageX-login.offsetLeft;
149 var y=e.pageY-login.offsetTop;
150 document.addEventListener('mousemove',move);
151 function move(e){
152 login.style.left=e.pageX-x+'px';
153 login.style.top=e.pageY-y+'px';
154 }
155 docuemnt.addEventListener('mouseup',function(){
156 document.removeEventListener('mousemove',move);
157 })
158 })
159 </script>
160 </html>
模态框拖拽案例分析--元素偏移量 offset 系列的更多相关文章
- 元素偏移量 offset 系列
offset 概述 offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 注意 ...
- 实现在vue中element-ui的el-dialog弹框拖拽
参考:实现在vue中element-ui的el-dialog弹框拖拽 1.在 utils 中新建 directives.js 文件 import Vue from 'vue' // v-dialogD ...
- 超炫HTML5 SVG聊天框拖拽弹性摇摆动画特效
这是一款很有创意的HTML5 SVG聊天框拖拽弹性摇摆动画特效. 用户能够用鼠标点击或用手滑动聊天框上的指定区域,该区域会以很有弹性的弹簧效果拉开聊天用户列表.点击一个用户头像后.又以同样的弹性特效切 ...
- JS 弹出框拖拽
css代码 body { margin:; text-align: center; } .box { display: none; background-color: #fff !important; ...
- Android4.0 Launcher拖拽原理分析
在Android4.0源码自带的Launcher中,拖拽是由DragController进行控制的. 1) 先来看看类之间的继承关系 2)再来看看Launcher拖拽流程的时序图 1.基本流程: ...
- js拖拽案例、自定义滚动条
简单实例: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...
- draggable与overflow同时存在,无法拖拽出父元素问题解决
在使用jquery-ui的拖拽功能对列表内的选项拖拽时,发现无法将选项拖拽出列表的范围,一出范围就自动隐藏在列表下,查找到最后的原因是css中的overflow的原因,overflow存在则不能将选项 ...
- vue拖拽插件（弹框拖拽）
// =======拖拽 插件 cnpm install vuedraggableimport draggable from 'vuedraggable' <draggable v-model= ...
- jq获取元素偏移量offset()
解释: 1 获取匹配元素在当前视口的相对偏移. 2 返回的对象包含两个整型属性:top 和 left demo1: 获取top与left var aaa = $(".aaa "); ...
- Blend4精选案例图解教程（三）：一键拖拽
原文:Blend4精选案例图解教程(三):一键拖拽 拖拽效果,常规实现方法是定义MoveLeftDwon.MoveLeftUp.MouseMove事件,在Blend的世界里,实现对象的拖拽,可以不写一 ...
随机推荐
- Delphi 移除窗口最大化按钮
很遗憾,好像没有直接的代码可以操作,可以试试以下代码: var GWL_Result: Integer; begin GWL_Result:= GetWindowLong(Handle,GWL_STY ...
- react native 音频播放 react-native-sound
先放一个效果图:该图实现的效果,点击播放按钮,进度条随着时间移动,点击暂停按钮,进度条停止移动 第一步,用到什么库 1.zmxv/react-native-sound 播放声音的库 2.calls ...
- Windows10使用WSL(Windows Subsystem for Linux)
官方页面地址:https://docs.microsoft.com/zh-cn/windows/wsl/ 查看WSL的IP地址:ip addr | grep eth0 下面是一个示例 PowerShe ...
- java泛型元组
package generics;class Amphibian{};class Vehicle{};public class TupleTest { static TwoTuple<Strin ...
- Django操作mongo数据库二（MongoClient方式）
一.基本环境 1.开发环境: Python环境:Python 3.8.16 Django环境:4.1 2.需要安装的包 pip install pymongo pip install mongoeng ...
- DP7361 是一款立体声六通道线性输出的数模转换器-兼容CS4361
DP7361 是一款立体声六通道线性输出的数模转换器,内含插值滤波器.Multi-Bit 数模转换器.模拟输出滤波器,支持主流的音频数据格式. DP7361 片上集成线性低通模拟滤波器和四阶Multi ...
- debian11用iso制作本地apt源
摘抄记录,原文链接: https://blog.csdn.net/leejearl/article/details/122708953?spm=1001.2101.3001.6650.1&ut ...
- MQTT X 1.9.1 发布：资源消耗降低 80%，稳定性大幅提升
经过两个 Beta 版本迭代,近日,MQTT 5.0 客户端工具 MQTT X 正式发布了 1.9.1 稳定版本. 该版本通过大规模性能优化以及已知问题修复实现了稳定性的飞跃提升.特别是在性能方面,以 ...
- 常用IBatis属性
<?xml version="1.0" encoding="utf-8" ?> <sqlMap namespace="GoodDet ...
- eNSP报错41解决方法
1.点击右上角的菜单 2.工具>>注册设备,全部勾选,然后注册,就行了.