模态框拖拽案例分析--元素偏移量 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的世界里,实现对象的拖拽,可以不写一 ...
随机推荐
- tomcat程序闪退，如何让tomcat不闪退，可以看见报错
1.在 startup.bat 文件最后加 pause 2.cd 到tomcat bin 目录下执行 startup.bat 3.直接去Tomcat目录下的log看输出日志,即catalina.out ...
- python_基础_习题集（10.25更新）
一.文件 1.利用文件充当数据库编写用户登录.注册功能 文件名称:userinfo.txt 基础要求: 用户注册功能>>>:文件内添加用户数据(用户名.密码等) 用户登录功能> ...
- React使用高阶组件与Hooks实现权限拦截教程
导读 高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数.这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React高阶组件使用小结,一起看看吧 高阶 ...
- 使用layui实现分页展示数据库的数据
layui是一个前端 UI 框架,内置了js代码,所以我们可以直接使用内置的分页 首先要用到layui的官网手册https://www.layui.com/ 1.进入手册页面的 "示例&qu ...
- （0501） perl-正则表达式-匹配关键字task【知乎】
(1)
- jwt二次加密失败原因(Bad “options.expiresIn“ option the payload already has an “exp“ property.)
在写vue+nodejs项目的校验token时,出现了次错误 然后想了想问题所在: 第一次加密的时候使用jwt.sign(value,秘钥,{}),会返回一个字符串,然后当前端跳转别的发送请求时,会将 ...
- php对接钉钉机器人报警接口
<?php function request_by_curl($remote_server, $post_string) { $ch = curl_init(); curl_setopt($ch ...
- jdbc封装工具类（无连接池）
package com.huang; import java.sql.Connection; import java.sql.DriverManager; import java.sql.Prepar ...
- WPF BackSpace 回退到上一个页面
在Wpf程序中,有时候点击到某些控件后,再按下[BackSpace]键,画面会回到上一个 TextBox可能自己处理了,所以没有这一个现象. 解决方案是: 在App.xaml.cs 的 Initial ...
- 官网jdk8,jdk11下载时需要登录Oracle账号的问题解决
当到这一步骤时先勾选同意,在这个下载按钮上点鼠标右键复制链接地址 文件的下载地址 我们需要把地址做些修改.把等号前面的地址删掉,然后找到等号后面地址中的otn后面加上-pub 然后把这个地址直接复制到 ...