First commit
This commit is contained in:
88
Modals/modal.css
Executable file
88
Modals/modal.css
Executable file
@@ -0,0 +1,88 @@
|
||||
/* Start by styling the outermost element defining a modal. This element
|
||||
* should cover the entire screen with a dark but transparent background
|
||||
* color. It needs a z-index value to make sure it is placed over
|
||||
* everything else. */
|
||||
.modal {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgb(33, 37, 41, 0.5);
|
||||
|
||||
/* STEP 0: Initially, occupy only the bottom half of the screen. You'll
|
||||
* change this later to cover the whole thing. */
|
||||
top: 0;
|
||||
|
||||
/* STEP 1: Add an opacity value of 0 to make the modal initially
|
||||
* invisible (completely transparent). */
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* Helper class for the modal. When the modal is activated, it "fades in"
|
||||
* over the course of .15 seconds, going from fully transparent (can't
|
||||
* be seen) to fully opaque (blocks out the background). This is optional,
|
||||
* but it makes for a nicer looking transition. */
|
||||
.fade {
|
||||
transition: opacity 0.15s linear;
|
||||
}
|
||||
|
||||
/* STEP 1a: Define a combined selector that applies to any element that has
|
||||
* the 'fade' class but doesn't have the 'show' class. HINT: There is a
|
||||
* :not pseudoclass where :not(...) means the rule applies when ... is not
|
||||
* true. */
|
||||
.fade:not(.show) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* STEP 2: Define a descendant selector to grab any element with the
|
||||
* 'modal-dialog' class that is a descendant of a shown modal (has both
|
||||
* the 'modal' and 'show' classes). */
|
||||
TODO {
|
||||
/* The transform property is used to define a change to an element. */
|
||||
transition: transform 0.3s ease-out;
|
||||
transform: translate(0, 10vh);
|
||||
}
|
||||
|
||||
/* STEP 2a: Make the modal dialog a centered flexbox to add spacing to
|
||||
* center the modal content horizontally. */
|
||||
.modal-dialog {
|
||||
}
|
||||
|
||||
/* STEP 2a: As above, use a descendant selector to grab the 'modal-dialog'
|
||||
* that is a descendant of 'modal', but only if the 'modal' element doesn't
|
||||
* have the 'show' class. */
|
||||
TODO {
|
||||
transition: transform 0.3s ease-out;
|
||||
transform: translate(0, -10vh);
|
||||
}
|
||||
|
||||
/* Create the box around the modal content */
|
||||
.modal-content {
|
||||
background: white;
|
||||
min-height: 10vh;
|
||||
min-width: 30vw;
|
||||
border: 1px solid black;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
/* Basic styling - not part of the tutorial */
|
||||
body {
|
||||
background: lightgray;
|
||||
font-family: "Trebuchet MS", sans-serif;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 15vw;
|
||||
background: white;
|
||||
border: 1px black solid;
|
||||
padding: 0.5vh 1vw;
|
||||
}
|
||||
63
Modals/modal.html
Executable file
63
Modals/modal.html
Executable file
@@ -0,0 +1,63 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user