码迷,mamicode.com
首页 > 编程语言 > 详细

javascript--自定义弹出登陆窗口(弹出窗)

时间:2019-01-14 15:02:09      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:提示   absolute   负数   box   word   form   浏览器兼容   cli   block   

web开发中浏览器对象封装了诸如prompt、alert、confirm等弹出框,但是有的弹出框并不能满足开发需要,需要我们自己定义弹出框,诸如用户登陆框、消息提示框等。本文利用弹出用户登陆框示例,对这部分知识做个小结。

示例需求:点击按钮,弹出登陆窗口,且该窗口可以拖拽,弹出窗口的同时,整个页面变成灰色半透明。

效果图如下:图1是起始页面,图2是点击“点击,弹出登陆框”按钮后页面,图3是登陆框自由拖动后页面。

技术分享图片                 技术分享图片                      技术分享图片

                            图1                        图2                       图3

分析

1.让整个页面变成灰色半透明,需要使用div对整个屏幕进行覆盖,这个div称为覆盖层。

2.点击按钮的时候,弹出登陆窗口和覆盖层,注意,登陆窗口的z-index应该最高。

3.点击关闭按钮的时候,隐藏登陆窗口和覆盖层。

4.实现登陆窗口的拖拽。(该功能在上节博文中有详细讲解)

重点关注:

①登陆窗口的position为absolute,牢记怎么让定位属性的盒子居中,这个需要用到数学知识,设置left:50%,然后给margin-left设置为盒子宽度一般的负数。以后在HTML+CSS标签博文中需要重点标记。

②盒子拖拽中,用到的事件对象的相关属性的浏览器兼容性问题。

③重点复习一下相对定位和绝对定位。

代码如下

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title>自定义登陆窗口</title>
  6         <style type="text/css">
  7             *{
  8                 margin: 0px;
  9                 padding: 0px;
 10             }
 11             /* 弹出登陆框按钮 */
 12             #login-header{
 13                 text-align: center;
 14                 height: 30px;
 15                 line-height: 30px;
 16             }
 17             #login-header a{
 18                 font-size: 24px;
 19                 text-decoration: none;
 20                 color: black;
 21             }
 22             
 23             /* 登陆框主体 */
 24             .login{
 25                 position: absolute;
 26                 width: 512px;
 27                 height: 284px;
 28                 z-index: 9999;
 29                 display: none;
 30                 background-color: white;
 31                 /* 这里要注意绝对定位的盒子怎么在屏幕显示居中 */
 32                 left: 50%;
 33                 margin-left: -256px;
 34                 margin-top: 142px;
 35                 border: 1px solid gray;
 36             }
 37             /* 登陆框标题 */
 38             .login-title{
 39                 width: 100%;
 40                 height: 40px;
 41                 line-height: 40px;
 42                 text-align: center;
 43                 margin-bottom: 20px;
 44                 cursor: move;
 45             }
 46             .login-title span a{
 47                 text-decoration: none;
 48                 border: 1px solid gray;
 49                 font-size: 12px;
 50                 color: black;
 51                 border-radius: 20px;
 52                 width: 40px;
 53                 height: 40px;
 54                 background-color: #fff;
 55                 position: absolute;
 56                 top: -20px;
 57                 right: -20px;
 58             }
 59             
 60             /* 登陆表单 */
 61             .login-input{
 62                 margin: 20px 0px 30px 0px;
 63             }
 64             .login-input label{
 65                 float: left;
 66                 height: 35px;
 67                 line-height: 35px;
 68                 width: 90px;
 69                 padding-left: 10px;
 70                 text-align: right;
 71                 font-size: 14px;
 72             }
 73             .login-input input.list-input{
 74                 height: 35px;
 75                 line-height: 35px;
 76                 width: 350px;
 77                 text-indent: 5px;
 78             }
 79             /* 登陆框登陆按钮 */
 80             .loginSubmit{
 81                 width: 260px;
 82                 height: 40px;
 83                 text-align: center;
 84                 border: 1px solid gray;
 85                 background-color: white;
 86                 margin-left: 120px;
 87                 
 88             }
 89             
 90             /* 遮盖层 */
 91             .bg{
 92                 background-color: #000;
 93                 width: 100%;
 94                 height: 100%;
 95                 top: 0px;
 96                 position: fixed;
 97                 opacity: 0.3;
 98                 -webkit-opacity: 0.3;
 99                 -moz-opacity: 0.3;
100                 display: none;
101             }
102         </style>
103     </head>
104     <body>
105         <!-- 弹出登陆框按钮 -->
106         <div id="login-header">
107             <a id="adminBtn" href="javascript:void(0)">点击,弹出登陆框</a>
108         </div>
109         
110         <!-- 登陆框主体 -->
111         <div id="login" class="login">
112             <!-- 登陆框标题 -->
113             <div id="login-title" class="login-title">
114                 登陆会员  
115                 <span><a id="closeBtn" href="javascript:void(0)">关闭</a></span>
116             </div>
117             <!-- 登陆框表单 -->
118             <div id="login-form">
119                 <div class="login-input">
120                     <label>登录名:</label>
121                     <input type="text" placeholder="请输入登录名" class="list-input"/>
122                 </div>
123                 
124                 <div class="login-input">
125                     <label>密&nbsp;&nbsp;&nbsp;码:</label>
126                     <input type="password" placeholder="请输入密码" class="list-input"/>
127                 </div>
128             </div>
129             <!-- 登陆框登陆按钮 -->
130             <input type="submit"  id="loginSubmit" value="登陆会员" class="loginSubmit"/>
131         </div>
132         
133         <!-- 遮盖层 -->
134         <div id="bg" class="bg">sada</div>
135         
136         
137         <!-- 插入JS代码 -->
138         <script type="text/javascript">
139             var login=document.getElementById(‘login‘);
140             var bg=document.getElementById(‘bg‘);
141             // 1.点击"点击,弹出登陆框",弹出登陆窗口和遮盖层
142             var adminBtn=document.getElementById(‘adminBtn‘);
143             adminBtn.onclick=function(){
144                 login.style.display="block";
145                 bg.style.display="block";
146                 return false;
147             }
148             // 2.点击"关闭",隐藏登陆窗口和遮盖层
149             var closeBtn=document.getElementById(‘closeBtn‘);
150             closeBtn.onclick=function(){
151                 login.style.display="none";
152                 bg.style.display="none";
153                 return false;
154             }
155             // 3.鼠标拖拽功能
156             var login_title=document.getElementById(‘login-title‘);
157             login_title.onmousedown=function(e){
158                 e = e || window.event;
159                 var x=e.pageX || e.clientX +(document.body.scrollLeft || document.documentElement.scrollLeft);
160                 var y=e.pageY || e.clientY +(document.body.scrollTop || document.documentElement.scrollTop);
161                 
162                 var boxX=login.offsetLeft;
163                 var boxY=login.offsetTop;
164                 
165                 var mouse_in_boxX=x-boxX;
166                 var mouse_in_boxY=y-boxY;
167                 
168                 document.onmousemove=function(e){
169                     var x=e.pageX || e.clientX +(document.body.scrollLeft || document.documentElement.scrollLeft);
170                     var y=e.pageY || e.clientY +(document.body.scrollTop || document.documentElement.scrollTop);
171                     
172                     login.style.left=x-mouse_in_boxX+256+‘px‘;
173                     login.style.top=y-mouse_in_boxY-142+‘px‘;
174                 }
175             }
176             
177             login_title.onmouseup = function(){
178                 document.onmousemove=null;
179             }
180             
181         </script>
182     </body>
183 </html>

 

javascript--自定义弹出登陆窗口(弹出窗)

标签:提示   absolute   负数   box   word   form   浏览器兼容   cli   block   

原文地址:https://www.cnblogs.com/WangYujie1994/p/10266029.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!