WDD 231: Web Frontend Development I

Modals

Overview

A modal is a user interface element in HTML that is used to display qualifying or prompting information. It often is used outside of the normal flow of a page or application, thus providing a critical tool to manage information. Modals are used to display content in a layer above the app. In this module we discover how to use, program, and style modal.

Prepare

• Reference: HTML dialog element - MDN
• Reference: :modal CSS Pseudo-class
• Code Example - CodePen: ⚙️ Modal Dialog and ::backdrop

Activity Instructions

Using your course home page, enable modal behavior by responding to users clicking on a course card/button and displaying details about the course.

Here is an example of the action and display effect:

HTML

1. Add an empty dialog element that will be populated with course details and displayed when clicked.

<dialog id="course-details"></dialog>

CSS

1. Use dialog to style the modal container. (:modal as shown in the MDN documentation will cause a CSS error. We recommend that you style using dialog or by styling the id or class name assigned to a dialog)
2. Use ::backdrop on the modal to affect the background.
3. Style the modal's close button.

dialog {
  border: 1px solid rgb(0 0 0 / 0.1);
  border-radius: .25rem;
  padding: 1rem;
  background-color: #fff;
  box-shadow: 0 0 3rem #777;
  width: 90%;
  max-width: 600px;
}

::backdrop {
  background-color: rgb(0 0 0 / 0.5);
}

dialog button {
  position: absolute;
  top: 23px;
  right: 23px;
  padding: .5rem 1rem;
  border: 1px solid rgb(0 0 0 / 0.1);
}

JavaScript

1. Write a function to display the modal.
2. Add the following content to the modal display:
   • button that will close the modal.
   • event listener to close the modal when the user clicks outside of the modal.
   • subject and number
   • title
   • credits
   • description
   • certificate
   • technology stack
   Check Your Understanding - Example

   This example assumes that you have declared and initialized the courseDetails variable to be assigned the HTML detail element.

   function displayCourseDetails(course) {
     courseDetails.innerHTML = '';
     courseDetails.innerHTML = `
       <button id="closeModal">❌</button>
       <h2>${course.subject} ${course.number}</h2>
       <h3>${course.title}</h3>
       <p><strong>Credits</strong>: ${course.credits}</p>
       <p><strong>Certificate</strong>: ${course.certificate}</p>
       <p>${course.description}</p>
       <p><strong>Technologies</strong>: ${course.technology.join(', ')}</p>
     `;
     courseDetails.showModal();
     
     closeModal.addEventListener("click", () => {
       courseDetails.close();
     });
   }

3. Add a 'click' event listener to the course container build (inside the loop building each course block). This trigger will call the new display function, passing the current course's information.
   Check Your Understanding

   courseDiv.addEventListener('click', () => {
         displayCourseDetails(course);
       });

Web Lab on Modals

For those who prefer to watch and learn, we have a video lab on modal dialogs. The first video covers building a single modal. The second video builds on the first and shows you how to reuse a dialog for multiple popups. The third video shows how to build modals from a JSON file and also included JavaScript Modules with import / export. This series should help you complete the Modal Dialog assignment for this week.

These labs are designed so that you can follow along and learn. You will need to pause the video instruction as you code your own project.

1. Download a start lab folder for the first video
2. Watch Modal Dialog Part 1 [5:00]
3. Watch Modal Dialog Part 2 [3:20]
4. Download a start lab folder with the temple data
5. Watch Modal Dialog Part 3 [7:44]
6. Watch Modal Dialog Part 4 [4:14]

Test and Share

Test your modal and share your work with your peers on Microsoft Teams.