How to close model from a button using vue.js ?
Last Updated :
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 ).
Syntax
Step-1:
Add @click=”$emit(‘close’)” property to the close button of the modal.
<button type="button" class="close"
@click="$emit('close')"> X
</button>
Step-2:
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;
}
},
};
Sample Code:
Creating the modal component
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>
|
Using the modal component in App.vue
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>
|
Output
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...