切换后css模态不显示onclick

Question

我有一个包含一些内容的自定义模式，我想让容器 100% 的宽度和高度 100%，这样它就可以像一个类似于引导模式的背景，其中包含另一个 div 用于内容

但我的模态容器不会在切换时显示，我已经编辑了类，我能够让模态内容单独显示，但不能显示整个容器

我已经尝试更改 z 索引，使其既是绝对的又是相对的，但效果不大

希望有人能提供一些见解

<template>
<div id="topbarContainer" v-bind:class="{ modalbackground: modal }">
<!-- TOPBAR -->
    <div class="topbar">

      <h6 id="dashboard">{{name}}</h6>

      <div class="searchContainer">
        <b-icon-search></b-icon-search>
        <small>search</small>
        <input class="searchbar" type="text" />
        <small class="searchbtn">H</small> 
      </div>
     
     <div id="topbarRightdiv">
      <img class="topbarButtons" src="../assets/superdash/chat-1.png" width="30px" height="30px" />
      <img class="topbarButtons" src="../assets/superdash/notifications.png" width="30px" height="30px" />
      <img class="topbarButtons" src="../assets/superdash/photo.png" width="30px" height="30px" />
      <p id="profileName" @click="showModal">Hemlin <small id="profileArrow">&#x25BC;</small></p>
    </div>

<!--modal -->

  <div v-if="this.modal==true" class="modal ">

      <div class="modal-content">
        <section class="modalSection ModalsectionHeader">
        <img class="modalImg" src="../assets/topbar/profile_icons-2.svg"/> <p id="darkmodeText">Dark Mode</p> <img class="modalImg" src="../assets/topbar/togle.svg" @click="toggleDarkmode" v-if="darkmode==true"/> <img class="modalImg" src="../assets/topbar/togle.svg" @click="toggleDarkmode" v-if="darkmode==false"/> 
        </section>
        <section class="modalSection">
          <img class="modalImg" src="../assets/topbar/profile_icons.svg"/> <p>Profile</p> <small>&#62;</small>
        </section>
        <section class="modalSection">
          <img class="modalImg" src="../assets/topbar/profile_icons-1.svg"/> <p>Wallet</p> <small>&#62;</small>
        </section>
        <section class="modalSection">
          <img class="modalImg" src="../assets/topbar/profile_icons-3.svg"/> <p>Saved</p> <small>&#62;</small>
        </section>
        <section class="modalSection">
          <img class="modalImg" src="../assets/topbar/profile_icons-4.svg"/> <p>Get Reports</p> <small>&#62;</small>
        </section>
      </div>


    </div>
      
    </div>
<!-- TOPBAR -->
</div>
</template>

<script>
export default {
  name: 'Topbar',
  props: ['name'],
  
  data:function(){
  return{
    modal: false,
    darkmode: false,
  }
},
methods:{
    showModal(){
      this.modal = !this.modal
    },
    toggleDarkmode(){
      this.darkmode = !this.darkmode
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#topbarContainer{
  z-index: 0;
}


/* Modal Content/Box */
.modal{
  z-index: 1;
  position: relative;
  padding: 20px;
  width: 500px;
  height: 500px;
  background-color: purple;

}
/* Modal inner div */
.modal-content {
  position: absolute;
  top: 100px;
  width: 15em;
  height: 20em;
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
}
.modalSection{
  padding-top: .5em;
  display: flex;
  width: 100%;
  justify-content: space-between;
}


</style>

Answer 1

您不需要在模板中使用this。

来自： <div v-if="this.modal==true" class="modal ">

到： <div v-if="modal" class="modal ">

Answer 2

我能够通过在模态之前添加一个 div 并将它们都设置为绝对值来解决它

  <div id="backdrop" @click="showModal" v-if="modal==true"></div>
  <div v-if="modal==true" class="modal-content">

      <div >
        <section class="modalSection ModalsectionHeader">
        <img class="modalImg" src="../assets/topbar/profile_icons-2.svg"/> <p id="darkmodeText">Dark Mode</p> <img class="modalImg" src="../assets/topbar/togle.svg" @click="toggleDarkmode" v-if="darkmode==true"/> <img class="modalImg" src="../assets/topbar/togle.svg" @click="toggleDarkmode" v-if="darkmode==false"/> 
        </section>
        <section class="modalSection">
          <img class="modalImg" src="../assets/topbar/profile_icons.svg"/> <p>Profile</p> <small>&#62;</small>
        </section>
        <section class="modalSection">
          <img class="modalImg" src="../assets/topbar/profile_icons-1.svg"/> <p>Wallet</p> <small>&#62;</small>
        </section>
        <section class="modalSection">
          <img class="modalImg" src="../assets/topbar/profile_icons-3.svg"/> <p>Saved</p> <small>&#62;</small>
        </section>
        <section class="modalSection">
          <img class="modalImg" src="../assets/topbar/profile_icons-4.svg"/> <p>Get Reports</p> <small>&#62;</small>
        </section>
      </div>

然后将其用作基本样式

/* Modal Content/Box */
#backdrop{
  position:absolute;
  background: rgba(163, 209, 240, 0.39);
  z-index: 1;
   width: 100%;
  left: 1em;
  height: 100%;
}
#backdrop:hover{
  cursor:pointer;
}
/* Modal inner div */
.modal-content {
  position: absolute;
  z-index: 2;
  top: 20em;
  right: 10em;
  top: 100px;
  width: 15em;
  height: 20em;
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
}
.modalSection{
  padding-top: .5em;
  display: flex;
  width: 100%;
  justify-content: space-between;
}