SOURCE

$(document).ready(function() {
	$('.modalBtn, #close, #popup-bg').click(function(e){
		e.preventDefault(); //阻止默认点击事件
		$('#popup').toggleClass('show'); //切换show类
		$('#popup-content').toggleClass('show');
	});
});

 <a href="" class="modalBtn">弹窗按钮</a>
 <!-- 弹窗 -->
<div id="popup">
  <div id="popup-content">
    <h1>弹窗标题</h1>
    <p>欢迎关注b站:技术成神_阿飞 </p>
    <button id="close">Close me</button>
  </div>
  <div id="popup-bg"></div>
</div>

html, body{
	height:100%;
}
body {
	background:#E67E22;
	margin:100px;
	font-family:"Helvetica Neue", sans-serif;
}
p{
	font-size:24px;
	color:rgba(255,255,255,.6);
}
a{
	text-decoration:none;
	background:#FFF;
	color:#E67E22;
	padding:0 5px;
	border-radius:3px;
	transition:all .5s;
	-webkit-transition:all .5s;
}
a:hover{
	background:rgba(255,255,255,.9);
}
#popup{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
#popup-content{
	position:absolute;
	z-index:200;
	width:700px;
	height:400px;
	left:50%;
	top:50%;
	margin-left:-350px;
	margin-top:-200px;
	padding:30px 50px;
	box-sizing:border-box;
	background:#FFF;
	box-shadow:0 10px 15px rgba(0,0,0,.2);
	text-align:center;
}

#popup-content h1{
	color:#555;
	padding-bottom:20px;
	border-bottom:1px solid #DDD;
}
#popup-content p{
	color:#888;
	font-size:21px;
}
#popup-content button{
	color:#FFF;
	background:#E74C3C;
	border-radius:4px;
	border:0;
	font-size:21px;
	padding:10px 50px;
}
#popup-content button:hover{
	background:#C0392B;
}
#popup-bg{
	position:absolute;
	z-index:100;
	width:100%;
	height:100%;
	background:rgba(0,0,0,.3);
}

#popup{
	transition:all .5s;
	-webkit-transition:all .5s;
    /* 隐藏弹窗 */
	visibility:hidden;
    /* 渐渐隐去 */
	opacity:0;
}
#popup.show{
    /* 显示弹窗 */
	visibility:visible;
    /* 渐渐隐去 */
	opacity:1;
}
#popup-content{
    /* 向上的位移动画 */
	transition:all .5s;
	-webkit-transition:all .5s;
	transform:translateY(100px);
	-webkit-transform:translateY(100px);
}
#popup-content.show{
    /* 向上的位移动画 */
	transform:translateY(0px);
	-webkit-transform:translateY(0px);
}