弹出框，我们也称为模态框。
（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=""> 用户名:</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>
