模态框拖拽案例分析--元素偏移量 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="">&nbsp用户名:</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>

 

posted @ 2020-10-30 20:46  #Lorraine#  阅读(149)  评论(0)  编辑  收藏  举报