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 visible window. In this module you discover how to use, program, and style modal.

Prepare

Code Example: Modal DialogExample using an HTML dialog, :modal pseudo-class, and ::backdrop pseudo-element

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.

The following demonstration 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. It is recommended 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 / 10%);
  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 / 50%);
}

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

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);
       });

Learn about on Modals

For those who prefer to watch and learn, you 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.

Download a start lab folder for the first video

Watch Modal Dialog Part 1 Single Dialog Example

Watch Modal Dialog Part 2 Reusable Dialog

Download a start lab folder with the temple data

Watch Modal Dialog Part 3 Scripted Dialog with JSON Temple Data A

Watch Modal Dialog Part 4 Scripted Dialog with JSON Temple Data B

Test and Share

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