弹框

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Issue_List</title>
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/popup.css">
	<script src="js/jquery.js"></script>
</head>
<body>
	<div id="btns">
		<a href="javascript:void(0)" id="add" class="btn">增加</a>
		<a href="javascript:void(0)" id="modify" class="btn">修改</a>
	</div>
	<div id="mask"></div>
	<div id="popup">
		<div id="popup-top">Add an issue</div>
		<div id="popup-middle">
			<div id="issue-category-shell">
				<span id="issue-category-desc">Issue Category : </span>
				<select id="issue-category" name="issue-category">
					<option>------------</option>
					<option value="0">Issue_01</option>
					<option value="1">Issue_02</option>
					<option value="2">Issue_03</option>
					<option value="3">Issue_04</option>
				</select>
			</div>
			<div>
				<span>Issue Text : </span>
				<div>
					<textarea class="issue-text"></textarea>
				</div>
			</div>
			<div>
				<span>Issue Text : </span>
				<div>
					<textarea class="issue-text"></textarea>
				</div>
			</div>
			<div>
				<span>Issue Text : </span>
				<div>
					<textarea class="issue-text"></textarea>
				</div>
			</div>
			<div>
				<span>Issue Text : </span>
				<div>
					<textarea class="issue-text"></textarea>
				</div>
			</div>
			<div>
				<span>Issue Text : </span>
				<div>
					<textarea class="issue-text"></textarea>
				</div>
			</div>
		</div>
		<div id="popup-bottom">
			<a href="javascript:void(0)" id="submit" class="popup-btn">submit</a>
			<a href="javascript:void(0)" id="cancel" class="popup-btn">cancel</a>
		</div>
	</div>
	<script src="js/popup.js"></script>
</body>
</html>

JavaScript

function popup(){
	$('#mask').fadeIn('normal', 'linear', ()=>{
		$('#popup').css({'display': 'block', 'left': ($(window).width()-$('#popup').width())/2, 'top': ($(window).height()-$('#popup').height())/2});
	}).css({'display': 'block'});

	if(document.getElementById('submit').nextSibling.nodeName == '#text')
		document.getElementById('popup-bottom').removeChild(document.getElementById('submit').nextSibling);
}

$('#add').click(()=>{
	popup();
});

$('#modify').click(()=>{
	popup();
});

$('.popup-btn').click(()=>{
	$('#popup').css('top', -$('#popup').height()).on('transitionend', ()=>{
		if(parseInt(document.getElementById('popup').style.top) == -$('#popup').height())
			$('#mask').css('display', 'none');
	});
});

CSS

*{
	margin: 0;
	padding: 0;
}

ul, li{
	list-style: none;
}

a{
	display: inline-block;
	text-decoration-line: none;
	color: inherit;
}

span{
	display: inline-block;
}

.clear{
	content: "";
	display: block;
	clear: both;
}

#btns{
	padding: 10px;
}

.btn{
	 60px;
	height: 30px;
	font-size: 16px;
	line-height: 30px;
	border-radius: 5px;
	border: none;
	cursor: pointer;
	color: #777777;
	background: #DDDDDD;
	padding: 4px;
	text-align: center;
}

.btn:hover {
    background: #EEEEEE;
    color: #666666;
}

#mask{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	 100%;
	height: 100%;
	background: black;
	opacity: .618;
	display: none;
}

#popup{
	position: absolute;
	z-index: 2;
	top: -550px;
	 450px;
	height: 550px;
	background: #AAAAAA;
	display: none;
	border-radius: 10px;
	transition: all .6s cubic-bezier(0.56, 0.49, 0, 1.2) .1s;
}

#popup-top{
	text-align: center;
	font-size: 18px;
	line-height: 18px;
	color: #666666;
	margin-top: 11px;
	margin-bottom: 11px;
}

#popup-middle{
	height: 460px;
	background: #CCCCCC;
	overflow-y: scroll;
	padding: 5px;
	color: #666666;
}

#issue-category-shell{
	height: 22px;
	line-height: 22px;
	margin-bottom: 5px;
}

#issue-category-desc{
	height: 22px;
}

#issue-category{
	height: 22px;
	background: #DDDDDD;
	color: #666666;
	border-radius: 3px;
}

.issue-text{
	 100%;
	height: 100px;
	font-size: 16px;
	line-height: 16px;
	resize: none;
}

#popup-bottom{
	text-align: center;
	margin-top: 6px;
}

.popup-btn{
	padding: 4px;
	 60px;
	height: 20px;
	font-size: 16px;
	line-height: 20px;
	cursor: pointer;
	background: #DDDDDD;
	border-radius: 5px;
	color: #777777;
}

.popup-btn:hover{
	background: #EEEEEE;
	color: #666666;
}

#cancel{
	margin-left: 20px;
}

::-webkit-scrollbar{
	 10px;
}

::-webkit-scrollbar-track{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}

::-webkit-scrollbar-thumb{
	border-radius: 10px;
	background: rgba(0, 0, 0, .1);
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .5);
}