css3 弹框功能样式

.message-box{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.3); 
	visibility: hidden;
}
.message-box, .message-box-main, .btn{
	transition: all 0.5s;
	-ms-transition: all 0.5s;
} 
.message-box.show{
	visibility:visible;
}

.message-box.show .message-box-main{
	top: 25%;
	opacity: 1;
}
.message-box-main{
	width: 500px;
	background-color: #fff;
	position: absolute;
	top: 15%;
	left: 50%;
	margin-left: -250px;
	border-radius: 3px;
	overflow: hidden;
	opacity: 0;
}

　　

转载于:https://www.cnblogs.com/zsongs/p/6000972.html