Recently, I left my job position at , and re-joined . Microsoft Outbrain Moving between companies isn’t always easy, as there’s not necessarily a consistency between technologies and libraries each company uses for developing their front end projects. For example, at Microsoft we used React for our projects, and in Outbrain the most common framework is Angular. No matter which framework or libraries you’re going to develop with, product’s specs and requirements for developing web apps will mostly remain the same, so you’ll probably end up creating the same components for different libraries over and over again. One of the most common component in web apps is the (mighty) Modal. In this article I’ll work you through with vanilla JavaScript, as well as with each one of the 3 most popular JavaScript libraries & frameworks: , , and . how to create a simple modal component React Angular Vue Take a deep breath, we’re going in. BTW, if you don’t have 10 minutes to read the whole article, you may find the Github repository with all of the examples here: _The repository behind my Medium article: "The Ultimate Guide for Creating a Simple Modal Component in Vanilla…_github.com dsternlicht/the-ultimate-guide-for-creating-a-simple-modal-in-react-vue-angular-and-vanilla-js Spec Before we start creating a modal component, we need to understand its core concepts and requirements. Modal is an element that appears and disappears after an event occurred on a page (page loaded, click, scroll, etc.). Modal should support all kinds of content including text, images, videos. Modal should be responsive and fit all kind of screen dimensions. Traditionally, a modal will have two layers: an overlay (for hiding the page’s content), and the modal itself. Modal should have a default design, but support custom classes for customizing the design of specific elements. Modal should have a close button. The modal controller should be notify on modal events (such as modal opened, modal closed, etc). Just to complete the spec, here’s an example of a modal for composing a new tweet in Twitter: Basics Although we’re going to implement our modal in 4 different JavaScript libraries and methods, we could use the same basic CSS and HTML for mocking our modal. The HTML: As you may see, the HTML code is pretty straightforward. We have a wrapper div element with the class , and it has 2 children: modal — this element will be in the background, and will be responsible for hiding the content of our web app. overlay — this element is the modal itself, and will include the modal’s content. modal_content The CSS (where the magic actually happen 🎩): First, we set a for the modal’s wrapper element (the one with the class). In addition, we’ll make sure it takes 100% of our viewport’s width and height by setting . We’ll also align it to the top-left corner of the screen with . This will ensure that our modal is getting all of the attention as other parts of the screen won’t be interactive. position: fixed; .modal width: 100%; height: 100%; left: 0; top: 0; Next, we need to create a nice and a bit transparent overlay layer. We’ll set an position for the div, and stretch it over the viewport with the same technique we used for the element. Then, we’ll add a black background color with a transparency to element, in order to get the effect we want (line 17). absolute .overlay .modal Last, we need to design the modal itself by adding styles to the div element. In order to make sure it’s always aligned to the center of our viewport, we’ll set an absolute position and add alignment. In addition, we’ll add which will ensure that the modal will always be aligned to the center without any dependency on the width and height of the modal. Another technique we’ll use is to set a of 90% to the modal element, and make sure that if the content is higher than that the browser will add scrollbars — (line 27). .modal_content left: 50%; top: 50%; transform: translate(-50%, -50%); max-height overflow: auto; The background color, and the rest of the properties are up to you. I used a white background, added a some and a default width. border-radius padding Here’s the result: Ladies & gentlemen we’ve got a modal! Coming up next: . make it functional Modal in Vanilla JS If we look at the spec, the first requirement of a modal is to be able to appear and disappear on demand, or to be more accurate, when an event occurred on a web page. For the sake of this tutorial, we’ll open the modal once a user clicks a specific button. So first, let’s create a button: <button id="modal_opener">Click Me! I Don't Bite... 😛</button> Then, we’ll add the modal’s HTML from our basic example and change the content: Note that the modal is set to as we don’t want the modal to appear on page loads. display none We’ll import a file that will contain our page & modal CSS (again, from the “ ” part of this tutorial). style.css basics And finally, we’ll create a script called to handle the functionality. modal.js You should end up with the following HTML: After adding some styles to the page, I managed to get the following result: Now for the interesting part. Here’s how will look like: modal.js What’s going on here? First, we created 2 variables for holding the DOM elements we’ll work with: — will hold the button that triggers the appearance of the modal (line 1). btn — will hold the modal element itself (line 2). modal Then we’ll add 3 different functions: — the main function. It will check what’s the current state of the modal by looking at the property (line 18). If the value is it will set the value to so the modal will be visible (line 19), and attach events for closing the modal (line 20). Otherwise, if the modal is visible, it will set the value to and will detach the closing events (line 23). toggleModal modal.style.display none block none — will add 2 event listeners for closing the modal. One on clicking the layer, and the other one on clicking the element. attachModalListeners .overlay .close_modal — will remove the event handlers from the 2 elements we mentioned above. detachModalListeners The final part will be to add the event handler itself when clicking the button: (line 27) btn.addEventListener('click', toggleModal); That’s it! You got yourself a nice modal in Vanilla JS: Modal in React In React, developing a reusable component is by design. So creating our modal component is going to be easy. For simplicity we’ll generate a new app with . create-react-app Then, we’ll work on 2 main components: — our app’s main component that will contain the button that triggers the modal opening, and will import the modal component. app.js — the reusable modal component. modal.js After creating a folder and files, the structure of our project will look as follows: modal React’s “src” folder after creating a modal folder and component. Let’s take a look at the modal component ( ): modal.js Let’s see what we have here. First, in lines 1–4, we imported all relevant dependencies including the modal component’s CSS (which I copied from previous examples). Then we created a stateless component that accepts 4 properties: — this argument will be a placeholder for the dynamic content section of our modal. It will be replaced by the content we’ll append to the modal component. children — a boolean value that will determine if the modal should be visible or hidden. show — a callback function that will be called once a user clicks on either the close button or the overlay layer. closeCallback — if we set a custom class to the modal component, it will be chained to the modal’s container. This will help us to customize the modal content if needed. customClass All properties are optional and have a default value (lines 25–30). Now that we have the modal component ready, it’s time to use it. In the we imported the modal component (line 3). app.js The app component’s state contains a boolean property called (line 9). This property will be responsible for the modal visibility. In addition, we added a method (line 12) that, as the name suggests, will toggle the modal’s visibility on and off. showModal toggleModal The method will include 2 elements: render A button element, with an method that will call the once clicked and will open the modal (lines 21–23). onClick toggleModal A modal component with the relevant properties (lines 25–29), and a children element that will be used as the modal content (lines 30–33). And… There you go. A modal component in React! Modal in Angular It’s funny. I’m not new to Angular, in fact, I spent most of my career developing with both AngularJS and Angular, and still, implementing the modal with Angular took me the longest, and I found myself keep confusing with Angular annotations for data binding. Anyway… We’ll generate a new Angular app using the , and run the command. Angular CLI ng new modal-app Next, we’ll add a new component called “ ” by running . modal ng generator c modal Just for a reference, this is how our folder will look like: src Angular’s “src” folder after generating a modal component. Let’s start with the file: app.component.ts Pretty simple right? The has a property for determine whether the modal should be opened or not. In addition, it has a method that will toggle the property from to in both ways. AppComponent showModal toggleModal showModal true false Next, let’s take a look at the file: modal.component.ts The modal component accepting 3 inputs: — a boolean value for showing / hiding the modal. show — an optional string that will be chained to the class in order to style a specific modal. customClass .modal — a function that responsible for closing the modal. closeCallback We’ll use those 3 inputs in the template: modal.component.html In line 1 we’ll add dynamically the custom class by using , and will set the display property to if the property is set to , and to if it’s set to . [ngClass] block show true none false In lines 2 & 5 we’re attaching the method on a click event, and in line 4 we’re transcluding the modal content. closeCallback And here’s how we’re adding the modal to the file: app.component.html Note that the name of the component is which being set in the file under the property. app-modal modal.component.ts selector Modal in Vue We’ll start by installing and generating a new Vue app by running . Vue CLI vue create modal-app Next, under the folder we’ll create a new Vue file for our modal component. components The folder of our app should look like this: src Vue’s “src” folder after creating a modal component. Let’s take a look at the file: App.vue In line 16 we created a script tag. In this script we’ll first import the modal component (line 17), and then export the Vue object with our configuration. In the property we declare the component (line 21) so our template will be able to use it. In line 25 we’ll add the property with a boolean value to our data object, and in line 28 we’ll add the method that will be responsible to toggle the property value from and and vice versa. components Modal show toggleModal show true false The section includes a element (line 3) with a Vue event listener that will call the method on click event, as well as a element that binds 3 attributes (line 8): <template> button v-on:click toggleModal Modal — a boolean value for determine if the modal is opened or not. show — a callback function that being called after a user clicks the close button. closeCallback — a string that will be added to the modal wrapper element for style customization. customClass You probably wondering how the modal component will look like in Vue, so here it is: We define a template that includes our modal’s HTML. A few things to notice: Line 2: We’re adding the custom class by using the annotation, and changing the CSS property by using the and change its value from to if the property is being set to or accordingly. v-bind:class display v-bind:style block none show true false Line 3 & 6: In order to use the method, we use the annotation. closeCallback @click Line 5: The tag will be used for transcluding the modal content. <slot></slot> Next, we’re exporting a Vue object with the name (line 14), and setting the types of each one of the props we want to support (line 16). Modal And you’re all done! : this was the first time I wrote a web app with , and it took me less time than Angular & React (which I’m well familiar with) 😌. So to sum up my first experience with Vue: A side note Vue Wrapping up Although each library and framework has its own syntax and annotations, the concept remains the same. Once we understood the technique behind the creation of a simple modal component in Vanilla JavaScript, it was easy enough to implement it with React, Vue, and Angular. By the way, in HTML 5 there’s a with some nice native API that allows custom styling, and although there are a few ready-to-use polyfills, most of the browsers still don’t support it. [dialog](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element The Github repo with all of the examples is available below: _The repository behind my Medium article: "The Ultimate Guide for Creating a Simple Modal Component in Vanilla…_github.com dsternlicht/the-ultimate-guide-for-creating-a-simple-modal-in-react-vue-angular-and-vanilla-js If you liked this article, feel free to share, clap, like, read again, send to your friends, and read it to your children before bed time 🙂

Microsoft

Mozilla

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

The Ultimate Guide for Creating a Simple Modal Component in Vanilla JavaScript, React, Angular…

Too Long; Didn't Read

Companies Mentioned

Daniel Sternlicht

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

The Ultimate Guide for Creating a Simple Modal Component in Vanilla JavaScript, React, Angular…

Too Long; Didn't Read

Companies Mentioned

Daniel Sternlicht

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES