Modal Styling

Modal attributes and structure

The modal is available in our dashboard and is intended to popup over the page to edit a product. By default it will be hidden, then laid over the page content when the edit button is clicked.

Update the modal section to include the following class and id names:

<!-- dashboard.html -->
  <div class="modal-content">
      <label for="edit-name">Name:</label>
      <input id="edit-name" type="text" />
      <label for="edit-price">Price:</label>
      <input id="edit-price" type="number" step=".01" />
      <div class="modal-buttons">
          <button id="save-edit">Save</button>
          <button id="cancel-edit">Cancel</button>
      </div>
  </div>
</main>

The <div class="modal-content"> wrapper will be used to style the box which pops up over the content:

We will also add an additional wrapper around this box:

  <!-- add wrapper div around modal-->
  <div id="edit-modal" class="modal">
    <div class="modal-content">
      <label for="edit-name">Name:</label>
      <input id="edit-name" type="text" />
      <label for="edit-price">Price:</label>
      <input id="edit-price" type="number" step=".01" />
      <div class="modal-buttons">
        <button id="save-edit">Save</button>
        <button id="cancel-edit">Cancel</button>
      </div>
    </div>
  </div> <!-- close wrapper -->
</main>

The purpose of this is to stretch to the full size of the page and slightly darken the background, adding focus on the popup. It will also be used to center the popup in the middle of the page.

Modal wrapper styling

Add the styles for this wrapper to the styles.css:

.modal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

• display: none: The modal is hidden until activated by the edit button.
• position: fixed: When using fixed there is no space created for the element and it is removed from the document flow. To position this element, we reference it from the top-left corner.
• background: rgba(0, 0, 0, 0.4): This will set a darker, transparent background to add focus to the modal. The rgba color is set using red, green, blue, and alpha (opacity) values. The three colors range from 0-255, and alpha from 0 (fully transparent) to 1 (no transparency). This background will stretch to 100% of the width and height.

Modal content styling

Add the remaining styles for the modal content:

.modal-content {
    margin: auto;
    background: #fff;
    border-radius: 3px;
    padding: 2rem;
    width: 80%;
    max-width: 500px;
}

.modal-content input {
    width: 100%;
    padding: 0.5rem 0 0.5rem 0.5rem;
    border: 1px solid #dde;
    border-radius: 3px;
    margin-bottom: 1rem;
}

#save-edit {
    background-color: #2d877d;
    color: #fff;
}

The modal should now be centered over the content. To view the modal, toggle between display: none; and display: flex; in the .modal section. Reinstating back to none when complete. We will use JavaScript in the next section to toggle the display.