Finish popup-modal exercise
This commit is contained in:
conor
parent
37187c9111
commit
0405fc39eb
4 changed files with 81 additions and 62 deletions
|
|
@ -1,7 +1,28 @@
|
||||||
# Popup
|
# 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
|
## Desired Outcome
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Self Check
|
### 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
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Popup</title>
|
<title>Popup</title>
|
||||||
<link rel="stylesheet" href="index.css" />
|
<link rel="stylesheet" href="style.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="button-container">
|
<div class="button-container">
|
||||||
|
|
|
||||||
|
|
@ -12,12 +12,6 @@ body {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
opacity: 100%;
|
opacity: 100%;
|
||||||
transition: background-color 0.5s ease-in, opacity 0.5s ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-container.show {
|
|
||||||
background-color: #000000;
|
|
||||||
opacity: 40%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#trigger-modal,
|
#trigger-modal,
|
||||||
|
|
@ -37,13 +31,7 @@ body {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
#trigger-modal:hover {
|
.popup-modal {
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 1px 1px 2px #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-modal,
|
|
||||||
.popup-modal.show {
|
|
||||||
width: 30%;
|
width: 30%;
|
||||||
height: 15%;
|
height: 15%;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
|
@ -52,23 +40,8 @@ body {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
|
||||||
|
|
||||||
.popup-modal {
|
|
||||||
margin-top: 10%;
|
margin-top: 10%;
|
||||||
opacity: 0;
|
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 {
|
#close-modal {
|
||||||
|
|
@ -80,7 +53,64 @@ body {
|
||||||
font-weight: 600;
|
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 {
|
#close-modal:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
box-shadow: 1px 1px 2px #000000;
|
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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,12 +12,6 @@ body {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
opacity: 100%;
|
opacity: 100%;
|
||||||
transition: background-color 0.5s ease-in, opacity 0.5s ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-container.show {
|
|
||||||
background-color: #000000;
|
|
||||||
opacity: 40%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#trigger-modal,
|
#trigger-modal,
|
||||||
|
|
@ -37,13 +31,7 @@ body {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
#trigger-modal:hover {
|
.popup-modal {
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 1px 1px 2px #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-modal,
|
|
||||||
.popup-modal.show {
|
|
||||||
width: 30%;
|
width: 30%;
|
||||||
height: 15%;
|
height: 15%;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
|
@ -52,23 +40,8 @@ body {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
|
||||||
|
|
||||||
.popup-modal {
|
|
||||||
margin-top: 10%;
|
margin-top: 10%;
|
||||||
opacity: 0;
|
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 {
|
#close-modal {
|
||||||
|
|
@ -79,8 +52,3 @@ body {
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
#close-modal:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 1px 1px 2px #000000;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue