实现一个悬浮弹窗效果

html

 <!-- 弹窗 -->
  <div id="msg_alert" style="background-color: black;opacity: 0.4;top: 0%;margin: 0;padding: 0;width: 100%;height: 100%;position: absolute;z-index: 1001;" @click="closeMsg(1)"></div>
  <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/success_out.png" style="width: 1rem;height: 1rem;margin-top: 0.5rem;"/>
      <span style="color: #171A1D;font-size: 130%;font-weight: bold;display: inline-block;margin-top: 0.5rem;">提交成功</span>
      <span style="margin-top: 0.5rem;margin-left: 0.5rem;margin-right: 0.5rem;color: #747677;font-size: 100%;">请耐心等待后台审核</span>
    </div>
    <div style="display: flex;justify-content: space-between;align-items: center;margin-top: 0.5rem;">
      <button style="border-bottom-left-radius:15px;color: #999999;font-size: 110%;width: 50%;line-height: 1rem;text-align: center;background-color: #FFFFFF;border:1px solid #F2F2F6;" @click="closeMsg(1)">取消</button>
      <button style="border-bottom-right-radius:15px;color: #0089FF;font-size: 110%;width: 50%;line-height: 1rem;text-align: center;background-color: #FFFFFF;border:1px solid #F2F2F6;" @click="closeMsg(2)">确定</button>
    </div>
  </div>
  <!--  弹窗 -->

js/vue

mounted() {
      self = this;
      $("#alter_show").hide();
    },
// 弹窗
      go_msgAlert(){
        $("#msg_alert").show();
        $("#alter_show").show();
      },

      // 弹窗关闭
      deleteMsg(num){
        if (num==1){
          self.alertMsg("考虑");
        }else{
          self.alertMsg("确定");
        }
        $("#msg_alert").hide();
        $("#alter_show").hide();
      },