punkfairie/odin-css-exercises
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Finish popup-modal exercise

Browse source
This commit is contained in:
conor 2021-10-21 20:21:32 +01:00
parent 37187c9111
commit 0405fc39eb
4 changed files with 81 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
animation/03-pop-up/README.md
View file

@ -1,7 +1,28 @@
# Popup
Popup modals are great for replacing the standard window popups that we often fall back on when we want our users to confirm something, or log in, etc.
In this exercise, activate a popup modal that will appear when the user clicks on the 'Open Modal' button and disappears when they click on the 'Close Modal' button inside the popup.
The modal should smoothly fade in and slide up to cover the Open button. The background should darken a little to create a clear distinction between foreground and background, and a little shadow should appear on the buttons when you hover over them.
When you're done, keep this repo handy! Being able to build a custom modal is a great show-off for your future projects.
### Hints
- There's a little Javascript here. Don't worry about it. It's been set up to add/remove the `show` class to the relevant elements when clicked
- Multiple transitions will be required
- Pay close attention to the elements being altered with classes being added or removed
## Desired Outcome
![outcome](./desired-outcome.gif)
### Self Check
- The mouse cursor changes to a pointer over the buttons
- A drop shadow gets added to the buttons when the mouse hovers over them
- The popup modal appears when the Open button is clicked
- The background fades to black with 40% opacity when the popup is opened
- The popup smoothly slides up to cover the existing Open button
- When the Close button is clicked the popup modal slides back down and gradually disappears
- When the popup modal is hidden your mouse should not change to the pointer if hovered over an invisible Close button

2
animation/03-pop-up/index.html
View file

@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Popup</title>
<link rel="stylesheet" href="index.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="button-container">

86
animation/03-pop-up/solution/solution.css
View file

@ -12,12 +12,6 @@ body {
height: 100vh;
background-color: #ffffff;
opacity: 100%;
transition: background-color 0.5s ease-in, opacity 0.5s ease-in;
}
.button-container.show {
background-color: #000000;
opacity: 40%;
}
#trigger-modal,
@ -37,13 +31,7 @@ body {
font-weight: 600;
}
#trigger-modal:hover {
cursor: pointer;
box-shadow: 1px 1px 2px #000000;
}
.popup-modal,
.popup-modal.show {
.popup-modal {
width: 30%;
height: 15%;
background-color: white;
@ -52,23 +40,8 @@ body {
display: flex;
justify-content: center;
align-items: center;
}
.popup-modal {
margin-top: 10%;
opacity: 0;
visibility: hidden;
transition: margin-top 0.5s ease-out, opacity 0.5s ease-out,
visibility 0.5s linear;
}
.popup-modal.show {
min-height: 90px;
opacity: 1;
visibility: visible;
margin-top: 0;
transition: margin-top 0.5s ease-out, opacity 0.5s ease-out,
visibility 0.5s linear;
}
#close-modal {
@ -80,7 +53,64 @@ body {
font-weight: 600;
}
/* SOLUTION */
/*
Disclaimer: duplicating selectors here isn't best practice.
We separated it out here to make it extra clear what has changed.
*/
.button-container {
transition: background-color 0.5s ease-in, opacity 0.5s ease-in;
}
.button-container.show {
background-color: #000000;
opacity: 40%;
}
#trigger-modal:hover,
#close-modal:hover {
cursor: pointer;
box-shadow: 1px 1px 2px #000000;
}
/*
Keep this '.popup-modal' selector separate from the main
.popup-modal selector, for the reasons outlined above
.pop-up-modal.show
*/
.popup-modal {
visibility: hidden;
transition: margin-top 0.5s ease-out, opacity 0.5s ease-out,
visibility 0.5s linear;
}
/*
The common properties between .popup-modal and .popup-modal.show
can easily be added by just adding this selector to the main
.popup-modal selector
*/
.popup-modal.show {
width: 30%;
height: 15%;
background-color: white;
border: 1px solid black;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
min-height: 90px;
}
/*
Keep this selector separate from the main '.popup-modal.show'
selector.
*/
.popup-modal.show {
opacity: 1;
visibility: visible;
margin-top: 0;
transition: margin-top 0.5s ease-out, opacity 0.5s ease-out,
visibility 0.5s linear;
}

34
animation/03-pop-up/style.css
View file

@ -12,12 +12,6 @@ body {
height: 100vh;
background-color: #ffffff;
opacity: 100%;
transition: background-color 0.5s ease-in, opacity 0.5s ease-in;
}
.button-container.show {
background-color: #000000;
opacity: 40%;
}
#trigger-modal,
@ -37,13 +31,7 @@ body {
font-weight: 600;
}
#trigger-modal:hover {
cursor: pointer;
box-shadow: 1px 1px 2px #000000;
}
.popup-modal,
.popup-modal.show {
.popup-modal {
width: 30%;
height: 15%;
background-color: white;
@ -52,23 +40,8 @@ body {
display: flex;
justify-content: center;
align-items: center;
}
.popup-modal {
margin-top: 10%;
opacity: 0;
visibility: hidden;
transition: margin-top 0.5s ease-out, opacity 0.5s ease-out,
visibility 0.5s linear;
}
.popup-modal.show {
min-height: 90px;
opacity: 1;
visibility: visible;
margin-top: 0;
transition: margin-top 0.5s ease-out, opacity 0.5s ease-out,
visibility 0.5s linear;
}
#close-modal {
@ -79,8 +52,3 @@ body {
border-radius: 5px;
font-weight: 600;
}
#close-modal:hover {
cursor: pointer;
box-shadow: 1px 1px 2px #000000;
}