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:
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");