html与css实现弹窗效果

弹窗由html、css组成，通过js控制弹窗
html代码：

    <div class="btn_select">//删除保存按钮
        <ul>
            <li>
                <div class="   btn" id="delete">删除</div>
            </li>
            <li>
                <div class="   btn" id="save">保存</div>
            </li>
        </ul>
    </div>
    <div class="back display" id="pop">//弹窗灰色背景
        <div class="pop_content">//弹窗白色内容
            <div class="confirm">确认删除该联系信息吗?</div>//显示信息
            <div class="">

              <div class="cancel fl pop_select">取消</div>
              <div class="sure fl pop_select">确定</div>//选择按钮
            </div>

        </div>
    </div>

css代码：

.back {
	position: fixed;//背景位置固定100%
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);//rgba(红，绿，蓝，透明度)，0，0，0代表黑

}

.pop_content {
	background:#ffffff;
	width: 70%;//宽度
	z-index: 1;//阴影上层
	margin: 50% auto;//距离顶部及居中
	overflow: auto;
  border-radius: 0.5rem;//圆角边
}
.confirm{//提示信息样式
height: 4rem;
text-align: center;//文字左右居中
line-height: 4rem;//上下居中
font-size: 0.8rem;
}
.pop_select{//弹窗选项
  height: 1.9rem;
  background: #dc432a;
  line-height: 1.9rem;
  text-align: center;
  color: #fff;
  width: calc(50% - 1rem);//宽度为50%减去边距
  font-size: 0.8rem;
  border-radius: 0.2rem;//圆角
  margin: 0.5rem;
}
.cancel{
  background: #9a9a9a;//取消按钮为灰色
}
.display{//控制弹窗显示隐藏
  display: none;
}

js控制代码：

    $('#delete').on('click', function() {//点击删除按钮显示弹窗
        $("#pop").removeClass("display")
    })
    
	$(".cancel").on('click', function() {//点击取消隐藏弹窗
        $("#pop").addClass("display")
    })
    
    $(".sure").on('click', function() {//点击确认进行删除操作并隐藏弹窗
    	$("#pop").addClass("display")
        alert("删除成功！")
    })

弹窗效果：