diff --git a/animation/03-pop-up/README.md b/animation/03-pop-up/README.md index 30e5365..9b01541 100644 --- a/animation/03-pop-up/README.md +++ b/animation/03-pop-up/README.md @@ -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 \ No newline at end of file diff --git a/animation/03-pop-up/index.html b/animation/03-pop-up/index.html index b556f7b..f725a27 100644 --- a/animation/03-pop-up/index.html +++ b/animation/03-pop-up/index.html @@ -5,7 +5,7 @@ Popup - +
diff --git a/animation/03-pop-up/solution/solution.css b/animation/03-pop-up/solution/solution.css index d370426..4f486e4 100644 --- a/animation/03-pop-up/solution/solution.css +++ b/animation/03-pop-up/solution/solution.css @@ -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; +} diff --git a/animation/03-pop-up/style.css b/animation/03-pop-up/style.css index d370426..b998438 100644 --- a/animation/03-pop-up/style.css +++ b/animation/03-pop-up/style.css @@ -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; -}