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{
width: 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;
width: 100%;
height: 100%;
background: black;
opacity: .618;
display: none;
}
#popup{
position: absolute;
z-index: 2;
top: -550px;
width: 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{
width: 100%;
height: 100px;
font-size: 16px;
line-height: 16px;
resize: none;
}
#popup-bottom{
text-align: center;
margin-top: 6px;
}
.popup-btn{
padding: 4px;
width: 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{
width: 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);
}
