How to close model from a button using vue.js ? - GeeksforGeeks

18 Jan, 2021
This article will tell us about how to close a modal from a button using vue.js. To close a modal using vue.js you can use the click event i.e. @click to trigger change in modal visibility. So, whenever the close button is pressed the @click method will trigger the function associated with the action ( here, hiding the modal ).
Add @click=”$emit(‘close’)” property to the close button of the modal.
<button type="button" class="close" 
    @click="$emit('close')"> X 
</button>
In the component where modal is used add close modal and open modal properties in data
data () {
     return {
       isModalVisible: false,
     };
   },
   methods: {
     showModal() {
       this.isModalVisible = true;
     },
     closeModal() {
       this.isModalVisible = false;
     }
   },
 };
Javascript
<!--Modal.vue-->  <script>  export default {    name: 'modal',  };</script><template>  <transition name="modal-fade">    <div class="modal-backdrop">      <div class="modal"        role="dialog"              >        <header          class="modal-header"          id="modalTitle"        >          <slot name="header">            Modal Header: GeeksforGeeks            <button              type="button"              class="close"              @click="$emit('close')" <!--Added the Click Event-->              >                X            </button>          </slot>        </header>        <section          class="modal-body"          id="modalDescription"        >          <slot name="body">            Closing modal using vue.js          </slot>        </section>      </div>    </div>  </transition></template><style>  .modal-backdrop {    position: fixed;    top: 0;    bottom: 0;    left: 0;    right: 0;    background-color: rgba(133, 226, 100, 0.427);    display: flex;    justify-content: center;    align-items: center;  }    .modal {    background: #eeeeee;    width: 50%;    height: 30%;    box-shadow: 2px 2px 20px 1px;    overflow-x: auto;    display: flex;    flex-direction: column;  }    .modal-header{    padding: 15px;    display: flex;  }    .modal-header {    border-bottom: 1px solid #eeeeee;    font-size: 30px;    color: #4AAE9B;    justify-content: center;  }  .modal-body {    position: relative;    font-size: 30px;    align-self: center;    padding: 20px 10px;  }  .close {    border: none;    font-size: 30px;    margin-left: 100px;    cursor: pointer;    font-weight: bold;    color: #4AAE9B;    background: transparent;  }</style>
Javascript
<!--App.vue-->  <script>  import modal from './components/modal.vue';    export default {    name: 'app',    components: {      modal,    },    data () {      return {        isModalVisible: false,      };    },    methods: {      showModal() {        this.isModalVisible = true;      },      closeModal() {        this.isModalVisible = false;      }    },  };</script>  <template>  <div id="app">    <button      type="button"      class="btn"      @click="showModal"    >      Open Modal    </button>      <modal      v-show="isModalVisible"      @close="closeModal"    />  </div></template>
Picked
Technical Scripter 2020
Vue.JS
JavaScript
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript