1. Overview

Challenge & starter files: Advent of JS

Full codes: nilstarbb/advent-of-js/13-custom-modal

Live Demo: 13 - Custom Modal || Advent of JavaScript

Preview:

custom-modal.gif

2. Details

Users should be able to:

  • Click on a point on the image, that triggers the modal
  • Click on the x within the modal to close the modal

3. Coding

This is a simple one.

style.css:

.hidden {
  display: none;
}

script.js:

const showBtn = document.getElementById("something");
const closeBtn = document.getElementById("close");
const modal = document.getElementById("modal");

closeBtn.onclick = () => modal.classList.add("hidden");

showBtn.onclick = () => modal.classList.remove("hidden");