Let's Build A Javascript Modal Plugin From Scratch

Welcome to the first of my Javascript Workouts. The aim with this series is to build as many practical Javascript elements as possible – no frameworks, no plugins. Just plain JS.

In this first video, we’ll build ourselves a vanilla Javascript modal plugin. We’ll setup default configuration options but allow the user to override them. We’ll handle the ability to switch between modals, and lastly, we’ll emit four custom events: before opening modal, after opening modal, before closing modal, and after closing modal.

My website
https://www.pixelrocket.store

Project Files
https://www.dropbox.com/s/fcymlamp7rkngqq/modal-plugin.zip?dl=0

Custom Events
https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent

Timestamps
0:00 Intro
0:56 Setup starting files
2:10 Difference between procedural JS and OOP JS
3:25 Setup our modal class
4:30 Constructor function
6:00 Setup default options
11:00 Setup init function
13:28 Setup modal triggers
15:50 Binding inside OOP
21:48 Handle modal open
25:06 Setup modal closers
27:28 Handle modal close
31:08 Setup modal CSS classes
39:10 Handle switching between modals
40:31 Handle custom event dispatching