Beginning
Modal popups are very common in most modern applications. They are primarily used to present concise information and are ideal for displaying advertising and promotional content. Modals provide a quick way to convey information and provide user-friendly closing options.
In this article, we will build a popup modal using Vuejs. The modal will include a cancel or close button to make it easier for the user to close it after completing the task. Additionally, we will implement a feature that allows the user to click outside the modal area to close it.
modal popup component
<script setup lang="ts">
import { ref } from 'vue';
const message = ref('This is a modal popup');
const emit = defineEmits(['close']);
const closeModal = () => {
emit('close');
};
</script>
<template>
<div class="popup" @click.self="closeModal">
<div class="popup-content">
<div class="popup-header">
<h2 class="popup-title">{
{ message }}</h2>
<button class="popup-close-button" @click.prevent="closeModal">X</button>
</div>
<article>
<div class="popup-content-text">
This is a simple modal popup in Vue.js
</div>
</article>
</div>
</div>
</template>Script Section
<script setup lang="ts">
import { ref } from 'vue';
const message = ref('This is a modal popup');
const emit = defineEmits(['close']);
const closeModal = () => {
emit('close');
};
</script>In this part, we import the required functionality from Vue.
ref is used to create a reactive variable message containing a message displayed in the modal box.
emit is used to define an event named "close", which can be triggered to close the modal box.
closeModal is a function that, when called, triggers the "close" event, effectively closing the modal.
Template Section
<template>
<div class="popup" @click.self="closeModal">
<div class="popup-content">
<div class="popup-header">
<h2 class="popup-title">{
{ message }}</h2>
<button class="popup-close-button" @click.prevent="closeModal">X</button>
</div>
<article>
<div class="popup-content-text">
This is a simple modal popup in Vue.js
</div>
</article>
</div>
</div>
</template>This code defines the structure of the modal box in the template.
The outermost div with class "popup" is used as the background of the modal.
@click.self="closeModal" event listener is attached to the background, allowing the modal to be closed when clicked outside its content.
The content includes a title (popup-title) and a close button (popup-close-button).
Below the title, there is an article section that contains the main content of the modal.
Render modal component
<script setup lang="ts">
import { ref } from 'vue'
import Popup from "@/components/Popup.vue"; // @ is an alias to /src
const msg = ref('Hello World!')
const isOpened = ref(false)
</script>
<template>
<div>
<h1>{
{ msg }}</h1>
<button @click="isOpened = !isOpened">Open Popup</button>
<Teleport to="body">
<Popup v-if="isOpened" @close="isOpened = !isOpened" />
</Teleport>
</div>
</template>Data and state management:
The code uses Vue's ref function to create two responsive variables:
- msg: Text message initially set to "Hello World!".
- isOpened: This is a Boolean variable with an initial value of false, indicating whether the pop-up window is open or closed.
Button click event
There is a <button> element in the template with a click event listener (@click). When the button is clicked, it toggles the value of the isOpened variable, effectively opening or closing the popup.
Import popup box component
The code imports a popup component (Popup.vue).
In the template, use v-if conditions to render the popup window component. Only when the isOpened variable is true (v-if="isOpened"), the pop-up window will be displayed, indicating that the pop-up window should be open.
<Teleport> is used to move the popup window component into the <body> element of the HTML document. This ensures that the popup is rendered outside of the current component's DOM hierarchy and can be displayed on top of other content on the page.
Communication between components:
When the popup component needs to be closed, the Popup component will trigger a close event @close. The parent component uses the @close event listener to listen for this close event.
When the Popup component emits an event, it toggles the isOpened variable, thus closing the popup window.
You can use the code designed in this article for online experience on CodeSandbox.
https://codesandbox.io/s/suspicious-kepler-993dmh?file=%2Fsrc%2Fviews%2FHome.vue%3A0-420
Finish
Due to the limited space of the article, today’s content will be shared here. At the end of the article, I would like to remind you that the creation of articles is not easy. If you like my sharing, please don’t forget to like and forward it to let more people in need See. At the same time, if you want to gain more knowledge about front-end technology, please follow me. Your support will be my biggest motivation for sharing. I will continue to output more content, so stay tuned.