css实现弹窗效果

用css实现弹窗效果有三种情况：

情况一（代码如下）：

<div className="alert_box">
	<div className="alert_bg"></div>
	<div className="alert_con">
		情况一
	</div>
<div>
.alert_box{
	position:fixed;
	left:0;
	top:0;
	z-index:900;
	width:100%;
	height:100%;
	.alert_bg{
		width:100%;
		height:100%;
		background:#333;
		opacity:0.7;
	}
	.alert_con {
		position:absolute;
		left:50%;
		top:50%;
		width:200px;
		z-index:1;
		transform:translate(-50%,-50%);
	}
}

情况二（代码如下）：

<div className="share_pop">
	情况二
</div>
.share_pop{
	position:fixed;/absolute;
	bottom:0;
	left:0;
	width:100%;
	height:200px;
	z-index:999;
}

情况三（代码如下）：

<div className="pop_alert">
	情况三
</div>
.pop_alert{
	postioin:fixed;
	left:50%;
	top:50%;
	z-index:999;
	width:300px;
	transform:translate(-50%,-50%);
}