模态框拖拽案例分析--元素偏移量 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的世界里,实现对象的拖拽,可以不写一 ...
随机推荐
- SpringMVC的常用操作汇总
基本操作 #类级别的注解 @Controller @RestController @RequestMapping("/hello") #springMVC常用方法级别注解 @Res ...
- VM虚拟机15安装Kali Linux2020版详细教程
下载kali镜像 kali Linux官网地址https://www.kali.org/downloads/下载相对应的电脑版本 打开Vmware虚拟机 安装虚拟机看物理机配置,尽量不要太折腾电脑(虚 ...
- 搭建Redis高可用集群的哨兵模式（Redis-Sentinel）【Windows环境】
参考 https://blog.csdn.net/itanping/article/details/100544152 哨兵模式搭建好,Java中配置和使用Redis高可用集群的哨兵模式,引入Jedi ...
- c语言container_of 编译报错
求指针ptr所在的结构体实例的首地址, #define offsetof(TYPE, MEMBER) ((size_t) &((TYPE *)0)->MEMBER) #define co ...
- 广告网络归因技术之SKAdNetwork
IDFA的背景 为了保护用户隐私,早在2012年就不再允许其生态中的玩家获取用户的唯一标识符,但是商家在移动端打广告的时候又希望能监控到每一次广告投放的效果,因此,苹果想出了折中的办法,就是提供另外一 ...
- C#如何判断文件是否存在
https://jingyan.baidu.com/article/ac6a9a5ead6ef86b653eac8b.html 首先,我们定义一个字符串,名为path. 然后,我们给他一个路径,这样才 ...
- 遇到bug怎么分析,这篇文章值得一看
博主总结的非常到位:https://mp.weixin.qq.com/s/UpaLWjix2tnfTqybx9dmoQ 为什么定位问题如此重要? 可以明确一个问题是不是真的"bug" ...
- 微信开发者工具代码管理设置使用SSH Key(使用密码)方法
参考微信开发社区--使用ssh key无法推送代码.微信开发者工具 SSH key认证 推送.拉取GitHub项目 1.确认已安装git,打开 Git Bash 使用https://git.weixi ...
- golang 实现twitter雪花算法
1 /* 2 * twitter雪花算法golang实现,生成唯一趋势自增id 3 * 保留位:63位 4 * 毫秒时间戳:[62-20]43位,时间范围[1970-01-01 00:00:00.00 ...
- 调度平台&定时任务
一.介绍: 1.调度平台能够定时 自动调用我们的脚本或程序,如每周.每天.每隔几小时等: 2.jenkins也可以算一种调度平台 但不是特别好,为了统一化管理.调度还是用专门的任务调度平台比较好 为什 ...