Issue where CSS modal does not appear when clicked after being toggled

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">&#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

In the template, there is no need to utilize this.

Change this line:

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

To this line:

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

Answer №2

I managed to find a solution by introducing a div before the modal and setting them both to absolute positioning like this

  <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 applied this basic styling

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unchecking the select-all checkbox in Ag-Grid after updating the row data using an external button

In my ag-grid setup, I have implemented checkboxes in the first row to allow users to select individual rows. Additionally, there is a "select all" checkbox in the header for easy selection of all rows with a single click. To create the select all checkbox ...

Manipulate the value of the <input> element when focused through JavaScript

After I focus on the input field, I was expecting to see Bond-Patterson, but instead, I am only getting Bond. What could be causing this discrepancy and how can it be fixed? $('input[name="surname"]').attr("onfocus", "this.placeholder='Bo ...

Troubleshooting the Problem of Adding Class with jQuery Click

Good day, I've been struggling with this issue all day. Almost got it working but not quite there yet. The problem is that I need the corresponding paragraph (#p-1 etc) to remain highlighted once the thumbnail is clicked. I have customized a plugin fo ...

Error displayed inline

I am facing an issue with a hidden textbox that I need to make visible based on a certain condition. Despite checking that the control is being triggered by the change event, I am unable to get it to display. I have experimented with different methods with ...

What is the proper way to select the <ul> element within an FTL template?

Can someone provide guidance on how to target a <ul> container within a freemarker template using JavaScript? My goal is to display the content of this specific <ul> element in my FreeMarker template on the web page. Any suggestions on how I ...

The issue of using an import statement outside a module arises when executing Protractor

I am facing an issue while running Protractor with my two files. When I execute the command "protractor protractor.config.js", I encounter the following error: D:\work\staru-app>protractor protractor.config.js [16:57:17] I/launcher - Running ...

Is it possible to calculate a variable within a dataset using existing data as a reference point?

Is there a way to dynamically compute some of the data variables in a Vue instance by referencing other variables and tracking their changes? new Vue({ el: '#root', data: { x: 1, y: x + 1 } }) <script src="https://cdnjs.cloudf ...

The loading feature fails to activate when attempting to execute a function

I recently encountered an issue with my loading effect code implementation. It appears that the loading effect does not work when I click the button, but it works perfectly fine without the function running. The function seems to interfere with the loadi ...

If a user refreshes too quickly or excessively, my server tends to crash

I'm feeling lost and struggling to find answers even through Google search. This is my first solo project where I am developing a MERN full-stack app. Initially, someone warned me it was too ambitious (they were right) and that I would get overwhelme ...

What could be the underlying reason for the unusual behavior observed in this range polyfill implementation?

I am attempting to transform an HTML5 range input into a set of radio buttons. Each radio button corresponds to a value within the original range, with text displaying its value. However, I am encountering an issue where the last piece of text, meant to sh ...

Verify that the select field has been chosen using Protractor

Currently, I am in the process of developing a test that places importance on whether a select field has already been populated. it('should automatically select a field if it hasn't been selected previously', function() { var usersField = ...

Ways to hover and efficiently organize components?

My elements are floated with a width of 20%, resulting in 5 elements per line. The current arrangement looks like this: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Now, I want to reorganize them vertically as follows: 1 4 7 10 13 2 ...

What could be causing the net::ERR_CONNECTION_CLOSED error to occur following an ajax request?

I'm facing an issue where my code works perfectly fine on localhost, but I encounter the following error when trying to run it on a hosting platform: (failed) net::ERR_CONNECTION_CLOSED. Could someone please explain what this error signifies and p ...

Enhancing Numbers with JavaScript

What I'm Looking for: I have 5 counters on my webpage, each starting at 0 and counting upwards to different set values at varying speeds. For example, if I input the values of 10, 25, 1500, 400, and 500 in my variables, I want all counters to reach t ...

Leveraging Ajax with PlayFramework Results

As stated in the PlayFramework Document 2.0 and PlayFramework Document 2.1, it is known that Play can return various responses such as: Ok() badRequest() created() status() forbidden() internalServerError() TODO However, when trying to send a response wi ...

I'm curious about the location where label_color keys are stored within apache-superset

Version: I have installed a Docker instance of Superset from this source The documentation mentions that colors can be customized based on labels, as explained here. To achieve this, it is necessary to provide a mapping of labels to colors in the JSON ...

The fixed table header is covering the navigation bar

Currently, I am building a website using Bootstrap and the DataTables library. The problem I am encountering is that the sticky table header is working fine, but it overlaps with the sticky nav bar. Is there a way to make the navbar "push down" the table h ...

Enhanced file uploading feature in Firefox 4 using AjaxForm

<form action="upload.aspx" enctype="multipart/form-data" id="ajaxUploadForm" method="post"> <input type="file" name="fileBase" id="fileBase"><input type="submit" value="send" /> </form> $( "#ajaxUploadForm" ).ajaxForm( { iframe: "t ...

Verify that each interface in an array includes all of its respective fields - Angular 8

I've recently created a collection of typed interfaces, each with optional fields. I'm wondering if there is an efficient method to verify that all interfaces in the array have their fields filled. Here's the interface I'm working wit ...

Issues following compilation with npm run prod

I am currently working on a small website using Laravel and Tailwind CSS on shared hosting. While I am able to use a command line tool on the host, I have encountered an issue. In my local environment, Tailwind works perfectly fine. However, after running ...