今天寫個點擊出現彈出框的效果，

HTML：

<h2>點擊，彈出對話框</h2>
		<div id="login">
			<h3>登錄會員</h3>
			<div class="yonghuming"><span>用戶名：</span><input type="text" name=""  value=""
					placeholder="請輸入用戶名" /></div>
			<div class="mima"><span>登錄密碼：</span><input type="password" name=""  value="" placeholder="請輸入密碼" />
			</div>
			<button type="button">登錄會員</button>
			<div class="close">關閉</div>
		</div>
		
		<div class="cover"></div>

CSS：

* {
margin: 0;
padding: 0;
}

input {
outline: none;
}

h2 {
position: absolute;
top: 20px;
left: 50%;
text-align: center;
z-index: 10;
transform: translateX(-50%);
}

h2:hover {
cursor: pointer;
}

#login {
position: absolute;
top: 45%;
left: 50%;
border: 1px solid #C7C7C7;
width: 400px;
height: 200px;
background-color: white;
transform: translate(-50%, -50%);
z-index: 10;
display: none;
}

#login h3 {
margin-top: 10px;
text-align: center;
}
#login h3:hover {
cursor: move;
}
.yonghuming>span,
.mima>span {
display: inline-block;
width: 80px;
text-align: right;
margin: 10px 20px 0;
//border: 1px solid red;
}

#login input {
height: 30px;
width: 250px;
border: 1px #c7c7c7 solid;
margin-top: 20px;
}

#login button {
display: block;
width: 180px;
height: 30px;
margin: 20px auto;
}
.close {
position: absolute;
top: 0;
right: 0;
background-color: white;
font-size: 10px;
line-height: 30px;
width: 30px;
height: 30px;
text-align: center;
cursor: pointer;
transform: translate(50%,-50%);
border-radius: 50%;
z-index: 10;
}
.cover {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: black;
opacity: 0.5;
display: none;
}

JavaScript：

var link=document.querySelector('h2');
			var cover=document.querySelector('.cover');
			var login=document.querySelector('#login');
			var close=document.querySelector('.close');
			var dragn=document.querySelector('#login').querySelector('h3');
			link.addEventListener('click',function(){
				login.style.display='block';
				cover.style.display='block';
			});
			close.addEventListener('click',function(){
				login.style.display='none';
				cover.style.display='none';
			});
			dragn.addEventListener('mousedown',function(e){
				var x=e.pageX-login.offsetLeft;
				var y=e.pageY-login.offsetTop;
				document.addEventListener('mousemove',move);
				function move(e){
					login.style.left=e.pageX-x+'px';
					login.style.top=e.pageY-y+'px';
				};
				document.addEventListener('mouseup',function(){
					document.removeEventListener('mousemove',move);
				}); 
			});