弹出框，我们也称为模态框。
模态框拖拽案例分析:
（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>