模态框弹窗组件样式

<div class="modal__box" id="show-modal">
	<div class="modal__z-body" onclick=""></div>
	<div class="modal__content">
		<div class="modal__header">提示消息<button>X</button></div>
		<div class="modal__content_body">
			<p style="text-align:center;">
				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1560596566995&di=50ae0769ca4da4aa33608b9ec14a4f5d&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F611bb3198c03cfefea188d170f33f27f1611c8e8a3ea-o8nm2q_fw658" width="20%">
				<br>
			支付中！</p>
		</div>
		<div class="modal__footer">
			<button class="cancel">取消</button>
			<button class="submit">确认</button>
		</div>
	</div>
</div>

.modal__box{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	height: 100%;
}
.modal__z-body{
	background-color:rgba(0,0,0,0.5);
	width: 100%;
	height: 100%;
}
.modal__content{
	height: auto;
	position: absolute;
	background-color:white;
	top: 20%;
	box-shadow:1px 2px 10px rgba(0,0,0,0.5);
	border-top-left-radius: 0.3rem;
	border-top-right-radius: 0.3rem;
	border-bottom-left-radius: 0.3rem;
	border-bottom-right-radius: 0.3rem;
}
.modal__header{
	padding: 10px;
	border-bottom: 1px solid #eee;
	border-top-left-radius: 0.3rem;
	border-top-right-radius: 0.3rem;
}
.modal__header button{
	float: right;
	border: none;
	background-color:transparent;
	outline: none;
	transition: 0.3s;
}
.modal__header button:hover{
	background-color:#eee;
}
.modal__header button:active{
	background-color:#007bff;
	color: white;
}
.modal__content_body{
	padding: 10px;
}
.modal__footer{
	border-top-left-radius: 0.3rem;
	border-top-right-radius: 0.3rem;
	border-top: 1px solid #eee;
}
.modal__footer button{
	width: 50%;
	float: left;
	padding: 0.8rem;
	background-color:transparent;
	border: none;
	outline: none;
	box-sizing: border-box;
	transition: 0.3s;
}
.modal__footer button:nth-of-type(1){
	border-right: 1px solid #eee;
}
.modal__footer button.cancel:hover{
	background-color:#eee;
	color: #777;
}
.modal__footer button.cancel:active{
	background-color:#999;
	color: #111;
}
.modal__footer button.submit:hover{
	background-color:#eee;
	color: #777;
}
.modal__footer button.submit:active{
	background-color:#007bff;
	color: white;
}
@media (min-width: 768px){
.modal__content{
	min-width: 60%;
	left: calc(50% - 30%)

}
@media (min-width: 1200px){
.modal__content{
	min-width: 40%;
	left: calc(50% - 20%)
}
}
@media (min-width: 1600px){
.modal__content{
	min-width: 30%;
	left: calc(50% - 15%)
}
}
}