彈窗由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("刪除成功！")
    })

彈窗效果：