通用模态框

很多场景需要用到模态框进行一下数据展示、提醒，索性就借鉴小程序的风格写个通用的模态框

HTML

<div class="mask"></div>
<div class="modal">
	<div class="modal-box">
		<p class="modal-title">标题</p>
		<p class="modal-content">这是一个模态框</p>
	</div>
	<ul class="modal-btns">
		<li>取消</li>
		<li>确定</li>
	</ul>
</div>

CSS

.mask{
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	position: fixed;
	top: 0;
	left: 0;
}
.modal{
	width: 75%;
	min-height: 100px;
	border-radius: 8px;
	background: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.modal-box{
	padding: 16px 10px 6px 10px;
}
.modal-title{
	font-size: 16px;
	font-weight: bold;
	color: #191919;
	text-align: center;
}
.modal-content{
	text-align: center;
	font-size: 16px;
	color: #7F7F7F;
	padding: 16px 0;
}
.modal-btns{
	display: flex;
	justify-content: space-between;
	font-size: 16px;
	border-top: 1px solid #F6F6F6;
}
.modal-btns li{
	width: 50%;
	padding: 14px;
	text-align: center;
	font-weight: bold;
}
.modal-btns li:first-child{
	color: #191919;
	border-right: 1px solid #F6F6F6;
}
.modal-btns li:last-child{
	color: #576B95;
}