CODEWITHSUNDEEP
htmlcssvue.jsvue-component
tamerjar
tamerjar

Reputation: 218

How to create a modal popup in vue

I have a modal popup in view, which displays some text once i click the open modal button, however when the button is clicked, the page gets greyed out but no popup shows, i'm not sure why that is happening as im new to VUE. Any help would be highly appreciated.

The code for the view page is below.

<template>
  <div>
    <transition name="modal">  
      <div v-if="isOpen">
        <div class="overlay" @click.self="isOpen = false;">
          <div class="modal">
            <h1>Modal heading</h1>
            <p>This my first modal using vue.js</p>
          </div>
        </div>
      </div>
    </transition>
    <button @click="isOpen = !isOpen;">
      {{ isOpen ? "Close" : "Open" }} modal
    </button>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      isOpen: false
    };
  }
};
</script>

<style scoped>
.modal {
  width: 500px;
  margin: 0px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px 3px;
  transition: all 0.2s ease-in;
  font-family: Helvetica, Arial, sans-serif;
}
.fadeIn-enter {
  opacity: 0;
}

.fadeIn-leave-active {
  opacity: 0;
  transition: all 0.2s step-end;
}

.fadeIn-enter .modal,
.fadeIn-leave-active.modal {
  transform: scale(1.1);
}
button {
  padding: 7px;
  margin-top: 10px;
  background-color: green;
  color: white;
  font-size: 1.1rem;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #00000094;
  z-index: 999;
  transition: opacity 0.2s ease;
}
</style>

Upvotes: 1

Views: 2266

Answers (1)

anatolhiman
anatolhiman

Reputation: 1859

Your overlay has a high z-imdex. It thus overlays your modal content, too. Add position relative and z-imdex higher than 999 to . modal and it should work.

Upvotes: 0

Related Questions