63 lines
2.1 KiB
HTML
Executable File
63 lines
2.1 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Modal Demo</title>
|
|
<link rel="stylesheet" href="modal.css">
|
|
</head>
|
|
|
|
<body>
|
|
<main>
|
|
<h1>Modal demo</h1>
|
|
<ul>
|
|
<li id="modal-btn-1">Modal Step 1</li>
|
|
<li id="modal-btn-2">Modal Step 2</li>
|
|
<li id="modal-btn-3">Modal Step 3</li>
|
|
</ul>
|
|
</main>
|
|
|
|
<!-- STEP 1: add the modal fade classes -->
|
|
<div id="modal-step-1" class="modal fade">
|
|
<p style="background: blue; color: white">Modal Step 1</p>
|
|
</div>
|
|
|
|
<!-- STEP 2: copy modal 1 and add a modal-dialog around the p -->
|
|
<div id="modal-step-2" class="modal fade modal-dialog">
|
|
<p style="background: blue; color: white">Modal Step 2</p>
|
|
</div>
|
|
|
|
<!-- STEP 3: copy modal 2 and add a modal-content around the p -->
|
|
|
|
</body>
|
|
|
|
<script>
|
|
(function () {
|
|
/* STEP 1: Add a click event listener to modal-btn-1. When clicked,
|
|
* add the 'show' class to modal-step-1. */
|
|
//document.querySelector(???).addEventListener('click', () =>
|
|
// document.querySelector(???).???);
|
|
const modal = document.getElementById('modal-step-1')
|
|
const modalBtn1 = document.getElementById('modal-btn-1')
|
|
modalBtn1.addEventListener('click', () => modal.classList.add('show'))
|
|
|
|
modal.addEventListener('click', () => modal.classList.remove('show'))
|
|
/* STEP 1: Add a click event listener to modal-step-1 (NOT the button).
|
|
* When clicked, from the 'show' class from modal-step-1. */
|
|
|
|
/* STEP 2: Add click event listeners for modal-btn-2 and modal-step-2
|
|
* similar to those above. */
|
|
|
|
/* STEP 3: Comment out the click event listeners above. Make a loop to
|
|
* generate the modal-btn-n and modal-step-n values for n = 1, 2, 3. In
|
|
* the loop, add click event listeners to add the 'show' class. */
|
|
|
|
/* STEP 3a: Instead of relying on a for loop on the indexes, use
|
|
* document.querySelectorAll to grab all 'modal' elements. This function
|
|
* returns an array. Loop through that array using .forEach and add an
|
|
* event to remove the 'show' class from modal-step-N. */
|
|
|
|
})();
|
|
</script>
|
|
|
|
</html> |