需要實現的效果圖
彈窗 msg_alert 遮罩 position：absolute
彈窗 alter_show 內容展示 position：fixed
z-index:控制顯示的層級
<!-- 彈窗 msg_alert 遮罩 position：absolute-->
<div id="msg_alert" style="background-color: black;opacity: 0.5;top: 0%;margin: 0;padding: 0;width: 100%;height: 100%;position: absolute;z-index: 1001;" @click="deleteMsg(1)"></div>
<!-- 彈窗 alter_show 內容展示 position：fixed z-index:控制顯示的層級 -->
<div id="alter_show" style="opacity: 1;position: fixed;background-color: #FFFFFF;width: 80%;border-radius: 15px;margin-top: 50%;z-index: 1002;">
<div style="display:flex;flex-direction: column;justify-content: center;align-items: center;">
<img src="__PUBLIC__/img/icon_store_care_on.png" style="width: 40px;height: 40px;margin-top: 20px;"/>
<span style="color: #171A1D;font-size: 130%;font-weight: bold;display: inline-block;margin-top: 20px;">注銷提醒</span>
<span style="margin-top: 20px;margin-left: 20px;margin-right: 20px;color: #747677;font-size: 100%;">注銷后將要清除您賬戶里所有信息，您確定還要注銷嗎？</span>
</div>
<div style="display: flex;justify-content: space-between;align-items: center;margin-top: 20px;">
<button style="border-bottom-left-radius:15px;color: #0089FF;font-size: 110%;font-weight: bold;width: 50%;line-height: 40px;text-align: center;background-color: #FFFFFF;border:1px solid #F2F2F6;" @click="deleteMsg(1)">考慮一下</button>
<button style="border-bottom-right-radius:15px;color: #0089FF;font-size: 110%;font-weight: bold;width: 50%;line-height: 40px;text-align: center;background-color: #FFFFFF;border:1px solid #F2F2F6;" @click="deleteMsg(2)">確定</button>
</div>
</div>
<!-- 彈窗 -->
用jQuery進行控制顯示隱藏
// 彈窗
function go_msgAlert(){
$("#msg_alert").show();
$("#alter_show").show();
},
// 彈窗關閉
function deleteMsg(num){
if (num==1){
alert("考慮");
}else{
alert("確定");
}
$("#msg_alert").hide();
$("#alter_show").hide();
},
hide()
當前端未顯示彈窗時，因為是jQuery調用的hide() 界面加載后，會設置一個css 樣式 element.style
show()
會默認設置一個css 樣式 element.style
如果你設置了flex 會根據你自己設置的樣式進行；
注：我這里用了行內樣式，所以element.style會生效，不知道將樣式放進style 以及 外部調用style 是什么情況？這個未測試
