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>密 码：</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>
原文地址：https://www.cnblogs.com/WangYujie1994/p/10266029.html
时间： 2024-07-30 13:01:38