Recently, I left my job position at Microsoft, and re-joined 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.
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:
Before we start creating a modal component, we need to understand its core concepts and requirements.
Just to complete the spec, here’s an example of a modal for composing a new tweet in Twitter:
As you may see, the HTML code is pretty straightforward. We have a wrapper div element with the class
modal , and it has 2 children:
overlay— this element will be in the background, and will be responsible for hiding the content of our web app.
modal_content— this element is the modal itself, and will include the modal’s content.
The CSS (where the magic actually happen 🎩):
First, we set a
position: fixed; for the modal’s wrapper element (the one with the
.modal class). In addition, we’ll make sure it takes 100% of our viewport’s width and height by setting
width: 100%; height: 100%; . We’ll also align it to the top-left corner of the screen with
left: 0; top: 0;. This will ensure that our modal is getting all of the attention as other parts of the screen won’t be interactive.
Next, we need to create a nice and a bit transparent overlay layer. We’ll set an
absolute position for the
.overlay div, and stretch it over the viewport with the same technique we used for the
.modal element. Then, we’ll add a black background color with a transparency to element, in order to get the effect we want (line 17).
Last, we need to design the modal itself by adding styles to the
.modal_content 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
left: 50%; top: 50%; alignment. In addition, we’ll add
transform: translate(-50%, -50%); 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
max-height of 90% to the modal element, and make sure that if the content is higher than that the browser will add scrollbars —
overflow: auto; (line 27).
The background color, and the rest of the properties are up to you. I used a white background, added a
padding and a default width.
Here’s the result:
Coming up next: make it functional.
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
display is set to
none as we don’t want the modal to appear on page loads.
We’ll import a
style.css file that will contain our page & modal CSS (again, from the “basics” part of this tutorial).
And finally, we’ll create a script called
modal.js to handle the functionality.
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.
modal.js will look like:
What’s going on here?
First, we created 2 variables for holding the DOM elements we’ll work with:
Then we’ll add 3 different functions:
modal.style.displayproperty (line 18). If the value is
noneit will set the value to
blockso 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
noneand will detach the closing events (line 23).
.overlaylayer, and the other one on clicking the
The final part will be to add the event handler itself when clicking the button:
btn.addEventListener('click', toggleModal); (line 27)
That’s it! You got yourself a nice modal in Vanilla JS:
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
Then, we’ll work on 2 main components:
app.js— our app’s main component that will contain the button that triggers the modal opening, and will import the modal component.
modal.js— the reusable modal component.
After creating a
modal folder and files, the structure of our project will look as follows:
Let’s take a look at the modal component (
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:
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.
app.js we imported the modal component (line 3).
The app component’s state contains a boolean property called
showModal (line 9). This property will be responsible for the modal visibility. In addition, we added a
toggleModal method (line 12) that, as the name suggests, will toggle the modal’s visibility on and off.
render method will include 2 elements:
onClickmethod that will call the
toggleModalonce clicked and will open the modal (lines 21–23).
And… There you go. A modal component in React!
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.
We’ll generate a new Angular app using the Angular CLI, and run the
ng new modal-app command.
Next, we’ll add a new component called “modal” by running
ng generator c modal.
Just for a reference, this is how our
src folder will look like:
Let’s start with the
Pretty simple right?
AppComponent has a
showModal property for determine whether the modal should be opened or not. In addition, it has a
toggleModal method that will toggle the
showModal property from
false in both ways.
Next, let’s take a look at the
The modal component accepting 3 inputs:
.modalclass in order to style a specific modal.
We’ll use those 3 inputs in the
In line 1 we’ll add dynamically the custom class by using
[ngClass], and will set the display property to
block if the
show property is set to
true, and to
none if it’s set to
In lines 2 & 5 we’re attaching the
closeCallback method on a click event, and in line 4 we’re transcluding the modal content.
And here’s how we’re adding the modal to the
Note that the name of the component is
app-modal which being set in the
modal.component.ts file under the
We’ll start by installing Vue CLI and generating a new Vue app by running
vue create modal-app.
Next, under the
components folder we’ll create a new Vue file for our modal component.
src folder of our app should look like this:
Let’s take a look at the
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.
components property we declare the
Modal component (line 21) so our template will be able to use it. In line 25 we’ll add the
show property with a boolean value to our data object, and in line 28 we’ll add the
toggleModal method that will be responsible to toggle the
show property value from
false and vice versa.
<template> section includes a
button element (line 3) with a Vue event listener
v-on:click that will call the
toggleModal method on click event, as well as a
Modal element that binds 3 attributes (line 8):
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:
v-bind:classannotation, and changing the CSS
displayproperty by using the
v-bind:styleand change its value from
showproperty is being set to
closeCallbackmethod, we use the
<slot></slot>tag will be used for transcluding the modal content.
Next, we’re exporting a Vue object with the name
Modal (line 14), and setting the types of each one of the props we want to support (line 16).
And you’re all done!
A side note: this was the first time I wrote a web app with Vue, and it took me less time than Angular & React (which I’m well familiar with) 😌. So to sum up my first experience with Vue:
Although each library and framework has its own syntax and annotations, the concept remains the same.
The Github repo with all of the examples is available below:
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 🙂
Create your free account to unlock your custom reading experience.