Stage 5: Modal HTML & CSS

UNIT

STEP 1

What Is a Modal?

A modal is an overlay window that appears on top of the page. When a visitor clicks a dancer card, the rest of the page dims and a box floats in the center with information about that dance tradition. Clicking the close button, or anywhere outside the box, makes it disappear.

The modal is made of two HTML pieces nested inside each other:

#modal-overlay, a fixed-position div that covers the entire screen. It has a dark semi-transparent background. It starts hidden with display: none. JavaScript will change it to display: flex to reveal it.
.modal, the box that sits centered inside the overlay. It holds the title, Tribal Nation label, and description text. JavaScript will fill these in when a card is clicked.

JavaScript comes in Stage 6

This stage builds the HTML and CSS for the modal. It will exist in the page but nothing will open it yet, that wiring happens in Stage 6. You can still preview the modal by temporarily changing display: none to display: flex in your CSS.

STEP 2

Add `data-dance` Attributes

Each dancer card needs to tell JavaScript which dance it represents. You do this with a data attribute, a custom attribute you can add to any HTML element using the data- prefix followed by any name you choose.

Find each .dancer-card div in your HTML and add data-dance="..." to it. Use the exact keys shown below, JavaScript will use these to look up the right content:

👉 Add data-dance to each .dancer-card opening tag: <div class="dancer-card" data-dance="jingle-dress">
<div class="dancer-card" data-dance="fancy-shawl">
<div class="dancer-card" data-dance="womens-traditional">
<div class="dancer-card" data-dance="grass-dance">
<div class="dancer-card" data-dance="mens-traditional">
<div class="dancer-card" data-dance="mens-fancy">

These values are the keys JavaScript will use to look up which dance was clicked. The spelling and hyphens must match exactly, you will define those same keys in the data object in Stage 6.

STEP 3

Add Modal CSS

Add these six rules just above </style>:

👉 Add just above </style>: #modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal {
  background: #1a1237;
  color: white;
  max-width: 580px;
  width: 100%;
  border-radius: 16px;
  padding: 48px 40px;
  position: relative;
  max-height: 85vh;
  overflow-y: auto;
}

#modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 2rem;
  cursor: pointer;
  transition: color 0.2s;
}

#modal-title {
  font-size: 2.25rem;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

#modal-nation {
  font-size: 0.8125rem;
  color: #d4a853;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  margin-bottom: 24px;
}

#modal-description {
  font-size: 1rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.85);
}

STEP 4

Add Modal HTML

Add this HTML just before </body>. The title, nation, and description are empty, JavaScript will fill them in when a card is clicked:

👉 Add just before </body>: <div id="modal-overlay">
  <div class="modal">
    <button id="modal-close">×</button>
    <h2 id="modal-title"></h2>
    <p id="modal-nation"></p>
    <p id="modal-description"></p>
  </div>
</div>

Preview the modal

To see how it looks, temporarily change display: none to display: flex in your #modal-overlay CSS. The box will appear over the page. Change it back to none when you are done, Stage 6 will wire up the real open/close behavior.

STEP 5

Why These Styles?

position: fixed on #modal-overlay, removes the element from the page flow entirely and pins it relative to the browser window. It stays in place even if the page is scrolled.
inset: 0, sets top, right, bottom, and left all to 0 in one shorthand. Combined with position: fixed, this stretches the overlay to cover the entire viewport.
z-index: 100, stacks the overlay above everything else on the page. The dancer cards use z-index: 1 and z-index: 2. A value of 100 guarantees the modal sits on top.
display: none, the overlay starts hidden. JavaScript will change this to display: flex when a card is clicked. The align-items and justify-content values are already in the rule, ready to center the box the moment it becomes flex.
max-width: 580px and width: 100% on .modal, the box grows to fill the screen on small devices but never exceeds 580 pixels on larger ones.
max-height: 85vh; overflow-y: auto, on short screens, the modal box will not overflow the window. Instead it becomes scrollable so the full description is always reachable.
data-dance attributes, custom attributes you invent using the data- prefix. They do not affect how the HTML renders. They are a message to JavaScript: "this card belongs to this dance key." Stage 6 will read them with getAttribute('data-dance').

Stage 5 Complete!

The modal structure is in place. In Stage 6 you will write the JavaScript that reads data-dance, looks up the right content, fills the modal fields, and opens it when a card is clicked.

Code Editor

<!DOCTYPE html>
<html>
<head>
  <title>Dancing in Step</title>
  <style>

* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

body {
      font-family: Georgia, serif;
      background: #faf8f5;
      color: #1a1a1a;
    }

#hero {
      background: #1a1237;
      color: white;
      padding: 80px 40px;
    }

#hero h1 {
      font-size: 3rem;
      margin-bottom: 8px;
      letter-spacing: -0.02em;
    }

#hero .tagline {
      font-size: 1.125rem;
      color: rgba(255, 255, 255, 0.65);
      font-style: italic;
      margin-bottom: 32px;
    }

#hero p {
      font-size: 1.0625rem;
      line-height: 1.8;
      max-width: 680px;
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: 28px;
    }

#hero a {
      color: #d4a853;
      font-size: 1rem;
    }

#dancers {
      background: #0f0f1a;
      padding: 80px 40px;
    }

#dancers h2 {
      font-size: 2rem;
      color: white;
      text-align: center;
      margin-bottom: 12px;
    }

#dancers .section-intro {
      font-size: 1rem;
      color: rgba(255, 255, 255, 0.6);
      text-align: center;
      margin-bottom: 48px;
    }

.dancers-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      max-width: 1100px;
      margin: 0 auto;
    }

.dancer-card {
      background: #1a1237;
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      height: 420px;
      position: relative;
      display: flex;
      align-items: flex-end;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

.card-label {
      width: 100%;
      padding: 20px;
      color: white;
      font-size: 1.125rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      position: relative;
      z-index: 2;
      background: linear-gradient(to top, rgba(26, 18, 55, 0.92), transparent);
    }

.dancer-card img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center bottom;
      transition: transform 0.4s ease;
    }

.dancer-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 48px rgba(212, 168, 83, 0.25);
    }

.dancer-card:hover img {
      transform: scale(1.06);
    }

.dancer-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(212, 168, 83, 0.12);
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 1;
    }

.dancer-card:hover::before {
      opacity: 1;
    }

</style>
</head>
<body>

<section id="hero">
    <h1>Dancing in Step</h1>
    <p class="tagline">Powwow regalia and dance traditions of the Lakota, Dakota, and Ojibwe peoples</p>
    <p>Powwow is a gathering. The drum sits at the center of the arena and everything &mdash; the dancers, the families, the songs &mdash; moves around it. For the Lakota, Dakota, and Ojibwe peoples, powwow is a living tradition: a space where culture is practiced, passed forward, and celebrated together.</p>
    <a href="https://americanindian.si.edu" target="_blank">Learn more: Smithsonian National Museum of the American Indian &rarr;</a>
  </section>

<section id="dancers">
    <h2>The Dances</h2>
    <p class="section-intro">Six dance traditions of the Lakota, Dakota, and Ojibwe peoples. Click any dancer to learn more.</p>
    <div class="dancers-grid">

<div class="dancer-card">
        <img src="../../assets/images/womensJingle.png" alt="Jingle Dress dancer">
        <span class="card-label">Jingle Dress</span>
      </div>

<div class="dancer-card">
        <img src="../../assets/images/womensFancy.png" alt="Fancy Shawl dancer">
        <span class="card-label">Fancy Shawl</span>
      </div>

<div class="dancer-card">
        <img src="../../assets/images/womensTraditional.png" alt="Women's Traditional dancer">
        <span class="card-label">Women's Traditional</span>
      </div>

<div class="dancer-card">
        <img src="../../assets/images/mensGrass.png" alt="Grass Dance dancer">
        <span class="card-label">Grass Dance</span>
      </div>

<div class="dancer-card">
        <img src="../../assets/images/mensTraditional.png" alt="Men's Traditional dancer">
        <span class="card-label">Men's Traditional</span>
      </div>

<div class="dancer-card">
        <img src="../../assets/images/mensFancy.png" alt="Men's Fancy dancer">
        <span class="card-label">Men's Fancy</span>
      </div>

</div>
  </section>

</body>
</html>

Live Preview

Modal HTML & CSS