原生弹框2(vue)

html、css、js

<template>
  <div class="about">
    <button id="modal" @click="appear">点击弹窗</button>
    <div class="container" id="modalContent" v-show="status">
      <div class="modalbg"></div>
      <div
        class="content"
        style=" width: 300px;height: 200px; z-index: 110;position: relative; left: 50%;top: 50%;transform: translate(-50%); background-color: #fff;"
      >
        <div
          style="background-color: #F8F8F8; padding: 10px;display: flex; align-items: center;justify-content: space-between;"
        >
          <span>详情弹框</span>
          <img
            src="../assets/images/u291.svg"
            alt
            style="width: 16px;height: 16px; cursor: pointer;"
            id="close"
            @click="close"
          />
        </div>
        <div class="content" style="padding: 10px;">
          详情内容
          <!-- <img src="../../图片/20141101200820_imLnw.jpeg" style="width: 500px;height: 500px;"  alt=""> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      status: false
    };
  },
  methods: {
    close() {
      this.status = false;
    },
    appear() {
      // alert("132")
      this.status = true;
    }
  }
};
</script>
<style lang="scss">
.container {
  width: 100%;
  height: 100%;
  // display: none;
}

.modalbg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: rgb(0, 0, 0);
  opacity: 0.3;
}
</style>

小结:
弹框 样式思路

1. btn 触发弹窗的按钮，其实就是来控制display:none和block切换的问题
2. container 弹窗以及里面的内容包括。我们把它设置给 宽高为100%，也就是遮罩层覆盖整个页面
3. modalbg 弹窗样式 固定定位、宽高100%、z-index background-color: rgb(0, 0, 0); opacity: 0.3;
4. content 要写的内容，自己定义即可