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

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

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做一些判断了，点击删除的时候让他显示或者隐藏了

下面附上效果图