I've been working on a custom modal design that I want to expand to fill the entire width and height of the screen, similar to how a Bootstrap modal functions. The goal is to have a container act as a background with another inner div for content
However, when I toggle the modal, only the modal-content shows up and not the entire container itself. I've tried adjusting classes and z-index values, switching between absolute and relative positioning, but nothing seems to solve the issue.
If anyone has any insights or suggestions on how to make the whole modal container show up correctly, it would be greatly appreciated!
<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">▼</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>></small>
</section>
<section class="modalSection">
<img class="modalImg" src="../assets/topbar/profile_icons-1.svg"/> <p>Wallet</p> <small>></small>
</section>
<section class="modalSection">
<img class="modalImg" src="../assets/topbar/profile_icons-3.svg"/> <p>Saved</p> <small>></small>
</section>
<section class="modalSection">
<img class="modalImg" src="../assets/topbar/profile_icons-4.svg"/> <p>Get Reports</p> <small>></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>