欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

javascript--自定义弹出登陆窗口（弹出窗）

程序员文章站 2022-07-01 20:45:05
web开发中浏览器对象封装了诸如prompt、alert、confirm等弹出框，但是有的弹出框并不能满足开发需要，需要我们自己定义弹出框，诸如用户登陆框、消息提示框等。本文利用弹出用户登陆框示例，对这部分知识做个小结。 示例需求：点击按钮，弹出登陆窗口，且该窗口可以拖拽，弹出窗口的同时，整个页面变 ......

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

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

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

javascript--自定义弹出登陆窗口（弹出窗）                 javascript--自定义弹出登陆窗口（弹出窗）                      javascript--自定义弹出登陆窗口（弹出窗）

                            图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>

 

上一篇： linux系统中给mysql配置环境变量

下一篇： 小程序渲染html的两种方法

推荐阅读