自己模拟二级弹窗（附源码）

最近项目当中用到了很多二级弹窗的操作，自己简单的写了一下；

html，css

<style>

.deleteBox{
display: none;
z-index: 1002;
width: 300px;
height: 160px;
border: 1px solid #C4C4C4;
border-top: 30px solid #E40014;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -80px;
border-radius: 5px;
text-align: center;
background: #FFFFFF;
}
.deleteBox i{
position: absolute;
top: -24px;
left: 136px;
color: #FFFFFF;
font-size: 16px;
}
.deleteBox p{
padding-top: 50px;
}
.deleteBox .deleteDiv{
width: 100%;
position: absolute;
bottom: 20px;
text-align: center;
padding: 10px 0;
}
.deleteBox input{
margin: 0 10px;
width: 60px;
height: 20px;
border-radius: 5px;
cursor: pointer;
background: #E3E6E7;
}
#deleteIt:hover{
background: #E40014;
color: #FFFFFF;
}
#cencel:hover{
background: #9D9D9D;
}

</style>

<div class="deleteBox">
<i>提示</i>
<p>确认删除删除</p>
<div class="deleteDiv">
<input type="button" class="deleter" id="deleteIt" value="删除" />
<input type="button" class="deleter" id="cencel" value="取消" />
</div>
</div>

接下来就可以用js做一些判断了，点击删除的时候让他显示或者隐藏了

下面附上效果图