前端弹窗的实现

需要实现的效果图

弹窗 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 是什么情况？这个未测试