标签：提示 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>密 码：</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>
标签：提示 absolute 负数 box word form 浏览器兼容 cli block
原文地址：https://www.cnblogs.com/WangYujie1994/p/10266029.html
