模态框拖拽案例分析--元素偏移量 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的世界里,实现对象的拖拽,可以不写一 ...
随机推荐
- BlendCAC: A Smart Contract Enabled Decentralized Capability-Based Access Control Mechanism for the IoT
摘要 BlendCAC,它是一种分散的.基于联合能力的 AC 机制,可有效保护大规模物联网系统中的设备.服务和信息.引入了基于联合能力的委托模型 (FCDM) 以支持分层和多跳委托.探索了委托授权和撤 ...
- MargeSort
归并排序(Merge Sort)是建立在归并操作上的一种有效,稳定的排序算法,该算法是采用分治法(Divide and Conquer)的一个非常典型的应用.将已有序的子序列合并,得到完全有序的序列: ...
- flutter 多种情况tabbar高度问题，普通使用和嵌套使用高度问题（Tab）。
众所周知tabbar的高度是不可改变的.比如我们普通的写一个tabbar. 先上效果图: 代码: Scaffold( appBar: AppBar( title: Text("TabBarD ...
- flutter SafeArea和SliverSafeArea，适应特殊屏幕
现如今的手机已经不能提供给应用程序规整的矩形界面了,一些带圆角或者是刘海屏让应用程序的布局更加复杂,甚至是需要单独适配,这对开发者来来太糟糕了. 因此SafeArea控件应用而生,SafeArea通过 ...
- temp_laijx_2023
############################ [{\"itemKey\": \"jenkinsConfig\",\"itemValue\& ...
- HashMap问题
package com.google; import javax.lang.model.element.NestingKind; import java.util.HashMap; public cl ...
- Eclipse设置背景色等
1.设置背景色 a.Window->Preferences->General->Editors->Text Editors b.选择Background color选择自定义颜 ...
- Qt多线程编程之QThread
背景引言[ GUI主线程 +子线程] 跟C++11中很像的是,Qt中使用QThread来管理线程,一个QThread对象管理一个线程,在使用上有很多跟C++11中相似的地方,但更多的是Qt中独有的内容 ...
- BUUCTF-[极客大挑战 2019]Http
一道考察http请求头X-Forwarded-For字段和Referer字段User-Agent字段的题目 一.基础知识 X-Forwarded-For(XFF)又名XFF头 1)概述:X-Forwa ...
- easyui combobox两种不同的数据加载方式
1.通过http访问加载数据. $('#XXXId').combobox({ url: httpUrl, valueField: 'code', textField: 'name', });2.通过j ...