Hey ,
I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.
Please upgrade (use this link) access this content.
I'm super eager to help you learn more!
Automatic Libraries are limited in functionality when it comes to customization. Manual Libraries are often better in this regard.
The Modal is a good example where we can create customizations, so we’ll make a Manual Library. Plus, there can be many different kinds of Modals, so we’ll use this opportunity to use Inheritance in practice.
Note: You can find the HTML and CSS required for this series inside the Starter files.
When we build a component, we need to think about two things:
There can be multiple modal instances on the same page. For example, a website can have two buttons that trigger two different modals.
We need to think about how we’re going to place these modals in the HTML. Two patterns work here:
.modal-overlay..modal-overlay<!-- Pattern 1 -->
<div class="modal-overlay">
<div class="modal"> ... </div>
<div class="modal"> ... </div>
</div>
<!-- Pattern 2 -->
<div class="modal-overlay">
<div class="modal"> ... </div>
</div>
<div class="modal-overlay">
<div class="modal"> ... </div>
</div>
Both patterns work. But Pattern 2 is more flexible since users are not restricted to placing the modal inside a .modal-overlay class. This is especially useful when users do not have full control over the HTML.
We’re going to use Pattern 2 since its more flexible.
When we use Pattern 2, we need to change the way we open the modal. We can add is-open class to the modal’s overlay instead of the <body> element.
<!-- Opens a modal -->
<div class="modal-overlay is-open">
<div class="modal"> ... </div>
</div>
(You can find the necessary HTML and CSS changes in the Starter files).
There are four types of Modals:
A User-triggered Modal is the type we’ve worked so far. Here, users click a button and the modal shows up.
A Timed Modal is a modal that pops up after a certain amount of time has passed.
A Scroll-based modal is a Modal that shows up after you scrolled a certain amount on the page.
An Exit-intent Modal is a modal that shows up when you try to leave the page.
If we want to build all four types of modals, we can ask users to pass in a type setting. Then, we use type to create the correct type of Modal (via Polymorphism).
// Pseudo code
function Modal (settings) {
const { type } = settings
if (type === 'normal') UserTriggeredModal(settings)
if (type === 'timed') TimeBasedModal(settings)
if (type === 'scroll') ScrollBasedModal(settings)
if (type === 'exit-intent') ExitIntentModal(settings)
}
We’re not going to build all four types in this series. We’re going to build two. (User-triggered Modal and Time-based Modal). You can use this knowledge to build the other two types.
Again, you can find the updated HTML and CSS in the starter files.
Note: We’re going to focus on building one type of modal first. We will create the second type once we’re done with the first type.
Let’s start by creating a new modal.js file. Don’t copy-paste the code we wrote since there will be lots of changes. Instead, comment them out so we can use them as a reference.
We need to import modal.js from main.js. We also need to make sure main.js is a module.
<script type="module" src="main.js"></script>
// main.js
import './modal.js'
Since we are building a Manual Library, we will export a Modal object. I’m going to use Factory Functions for this component. You can follow along with any OOP flavour you want.
export default function Modal () {
// ...
}
We need to import the modal in main.js.
// main.js
import Modal from './modal.js'
We can create a modal with Modal.
// main.js
Modal()
This does nothing now. We’ll work on Modal next.