I have a custom modal with some content, I want to make the container 100% width and height 100% so It can act like a background similar to a bootstrap modal with another div inside of it for the content

but my modal container won't show on toggle, I have edited the classes and I am able to get modal-content to show on its own but not the entire container

I have tried changing the z indexes making them both absolute and relative but it doesn't do much

hoping someone can provide some insight

<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>

CodePudding user response：

You do not need to use this in the template.

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

To: <div v-if="modal" class="modal ">

CodePudding user response：

I was able to resolve it by adding a div before the modal and just setting them both to absolute like so

  <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>

then used this for the basic style

/* 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;
}