Vue

by Christopher O

HTML

<div id="parent">
  <modal ref="modal"></modal>
  <button @click="openModal">Open Modal</button>
  <button @click="closeModal">Close Modal</button>
</div>

<template id="child">
  <div v-if="showModal">
    <div id="modal">
      <p>Hello i am a modal
      </p>
      <button @click="hide">Close</button>
    </div> 
  </div>
</template>

CSS

#modal {
  position:absolute;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: grey;
  color:white;
  flex-direction: column;
}

Vue

Vue.component('modal',{
	template: '#child',
	data: () => ({ showModal: false }),
  methods: {
  	show() {
    	this.showModal = true
    },
    hide(){
    	this.showModal = false
    }
  }
})

new Vue({
  el: "#parent",
	methods: {
		openModal() {
    	this.$refs.modal.show()
    },
    closeModal() {
    	this.$refs.modal.hide()
    }
  }
})