16. Feedback modal window - Gr0mi4/Hello-World GitHub Wiki

The goal is to get experience with creating modal windows. Usually, its a popup component on a page, that gets page focus and the rest of the page becomes inaccessible until you close the modal window or chose one of the provided options in the modal.

In this task, you should create a new common component pages/common/modal. It defines a modal component, with position: fixed and height: auto, but the content is empty, because this component is not intended to use directly. It's a new concept for you. When you create one component that defines layout and another to fill that layout with some content. It allows re-using modal component on different pages, filling it with different content. Create another component for the content: pages/contacts/components/feedback-modal. Basically, it's a very simple component. It renders Modal and puts feedback-form inside as a content.

To understand how to implement this approach - read this doc https://pugjs.org/language/inheritance.html

  1. Remove the form from the contacts page and re-style the button to look like this:

  2. Create the main script for the contacts page: src/pages/contacts/contacts.js. This script will control the whole page. For this task, it should assign a click event listener for the button you styled in the previous point ^. when you click the button - show alert as a temporary "modal" implementation.

  3. Now, let's make a layout for the Modal component:

The modal has 2 states: opened and closed. By default it's closed. It provides an interface with 2 methods: open and close. If you call window.modal.open() in the console - it should appear on the screen. Modal should has a minimum height of 300px, white background, and a shadow.

  1. Next, instead of showing alert by clicking the button - show modal, so that you don't need to call the modal manually in the console.

  2. Now, a tricky part: modal "overlay". It's a grayish background for the whole screen, that prevents you from clicking outside of the modal. Add an empty div.overlay to the modal component (but not inside of the modal itself, it should live outside of the actual modal component, but be in the same pug file). It should have width: 100vw and height: 100vh and be in a fixed position to fill the whole screen.

  3. Closing modal. Add an absolute positioned close button into the modal. Use pseudo-classes "before" and "after" to make X. When you show the modal - it should add event listener for the click button and overlay. When you click overlay (outside of the modal), or the close button – the modal should close and remove click event listeners.

  4. The modal is empty now, so let's display inside our feedback-form component. For that, you need an intermediate component feedback-modal. It will look like this:

extends ../../common/modal/modal.pug

block content
  include ../feedback-form.pug

Where content is the block of modal you're trying to replace. In modal, you define it as an empty block content.

Put feedback-modal on the page, instead of the common modal component. As our new feedback-modal includes the modal, so we don't need 2 modals on the page.

  1. Now, when you click "Leave your feedback" button, you should see a modal with feedback form. Re-style feedback-form, so that it doesn't have blue. The final result should look like this:

The modal should have max-height: calc(100vh - X), where X = sum of top and bottom offsets you want to have (so that the Modal wouldn't touch the edges of the viewport). Pay attention, that if the content does not fill inside of the modal - it should scroll inside.

The Modal must be centered on the screen.

The form should work as usual.

  1. (OPTIONAL) When you open the modal - prevent the page itself from scrolling. It's tricky, so I leave it for you to find a solution.