WEB骇客DEMO - 弹出式窗口 popover API 6

<div class="product">
  <div class="product-img">
    <figure><img src="photo-1631233999975-3d559f0526e1.webp" alt=""></figure>
  </div>
  <div class="product-info">
    <h2>The Jessica Gown</h2>
    <a class="brand" href="#">Disco & Co.</a>
    <p class="price">$2399.95</p>
    <small>Or 4 interest-free installments of $599.99 with <a href="#">MeowCatPay</a></small>
    <hr />
    <div class="color-options">
      <p class="preview"><b>Color:</b> White</p>
      <ul class="color-list">
        <li class="color" style="background: white;">white</li>
        <li class="color" style="background: beige;">beige</li>
      </ul>
    </div>
    <div class="size-options">
      <p><b>Size:</b></p>
      <ul class="size-list">
        <li>
          <input type="radio" name="selectedSize" id="size-xxs" value="xxs">
          <label for="size-xxs">XXS</label>
        </li>
        <li>
          <input type="radio" name="selectedSize" id="size-xs" value="xs">
          <label for="size-xs">XS</label>
        </li>
        <li>
          <input type="radio" name="selectedSize" id="size-s" value="s">
          <label for="size-s">S</label>
        </li>
        <li>
          <input type="radio" name="selectedSize" id="size-m" value="m">
          <label for="size-m">M</label>
        </li>
        <li>
          <input type="radio" name="selectedSize" id="size-l" value="l">
          <label for="size-l">L</label>
        </li>
        <li>
          <input type="radio" name="selectedSize" id="size-xl" value="xl">
          <label for="size-xl">XL</label>
        </li>
        <li>
          <input type="radio" name="selectedSize" id="size-xxl" value="xxl">
          <label for="size-xxl">XXL</label>
        </li>
      </ul>
      <button id="size-guide-btn" popovertarget="size-guide">Size Guide</button>
    </div>
    <form class="add-to-cart-form">
      <label class="quantity-label" for="quantity"><b>Quantity:</b></label>
      <input type="number" id="quantity" value="1">
      <button class="add-to-cart-btn" type="submit">Add to Cart</button>
    </form>
    <p>Free Shipping on Orders $150+</p>
    <p>Please select a size to check store availability.</p>

  </div>
</div>

<div id="size-guide" popover>
  <button class="close-btn" popovertarget="size-guide" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <p class="sr-only">Close</p>
  </button>
  <h2>Size Guide: Dresses</h2>
  <table border="0" cellpadding="2" cellspacing="2">
    <thead>
      <tr>
        <th></th>
        <th>XXS</th>
        <th>XS</th>
        <th>S</th>
        <th>M</th>
        <th>L</th>
        <th>XL</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <th scope="row">US Size (Numeric)</th>
        <td>00</td>
        <td>0<br>2</td>
        <td>4<br>6</td>
        <td>8<br>10</td>
        <td>12<br>14</td>
        <td>16</td>
      </tr>
      <tr>
        <th scope="row">Bust</th>
        <td>32</td>
        <td>33<br>34</td>
        <td>35<br>36</td>
        <td>37<br>38</td>
        <td>39.5<br>41</td>
        <td>42.5</td>
      </tr>
      <tr>
        <th scope="row">Natural Waist</th>
        <td>24</td>
        <td>25<br>26</td>
        <td>27<br>28</td>
        <td>29<br>30</td>
        <td>31.5<br>33</td>
        <td>34.5</td>
      </tr>
      <tr>
        <th scope="row">Drop Waist</th>
        <td>26</td>
        <td>27<br>28</td>
        <td>29<br>30</td>
        <td>31<br>32</td>
        <td>33.5<br>35</td>
        <td>36.5</td>
      </tr>
      <tr>
        <th scope="row">Hips</th>
        <td>34</td>
        <td>35<br>36</td>
        <td>37<br>38</td>
        <td>39<br>40</td>
        <td>41.5<br>43</td>
        <td>44.5</td>
      </tr>
    </tbody>
  </table>
  <div class="measurements">
    <h2>How to take measurements</h2>
    <ul class="measurements-guide">
      <li><b>Bust:</b> Stand with your arms relaxed at your sides. Place the measuring tape under your arms, at the fullest part of your bust. Keep the tape level across your shoulder blades.</li>
      <li><b>Natural Waist:</b> Stand up straight and find the natural crease of your waist. Place the measuring tape around your waist, keeping the tape comfortably loose.</li>
      <li><b>Drop Waist:</b> Measure around your body 1 1/2 inches below your natural waist.</li>
      <li><b>Hips:</b> Stand with your feet together. Place the measuring tape around the fullest part of your hips</li>
    </ul>
  </div>
</div>

/* Popover things */

#size-guide::backdrop {
  background: rgba(190, 190, 190, 0.5);
}

#size-guide {
  padding: 3rem;
  border: none;
  width: clamp(300px, 80vw, 600px);
  max-height: 480px;
}

#size-guide h2 {
  margin: 0 0 1rem;
}

.close-btn {
  filter: grayscale();
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.25rem;
}

/* Animating */
#size-guide {
  &:popover-open {
    /*   0. BEFORE-OPEN STATE   */
    /*  initial state for what we're animating *in* from, 
        in this case: goes from lower (y + 20px) to center  */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }

    /*   1. OPEN STATE   */
    /*  state when popover is open, BOTH:
        what we're transitioning *in* to 
        and transitioning *out* from */
    transform: translateY(0);
    opacity: 1;
  }

  /*   2. AFTER-OPEN-IS-CLOSED STATE   */
  /*  initial state for what we're animating *out* to , 
      in this case: goes from center to (y - 50px) higher */
  transform: translateY(-50px);
  opacity: 0;

  /*  enumarate transitioning properties, including display */
  transition: transform 0.5s, opacity 0.5s, display 0.5s;
  transition-behavior: allow-discrete;
}

/* Style things */

:root {
  --blue: #4a9fe0;
  --darkblue: #616183;
  --gray-bg: #f0f0f0;
  --peppermint: #e9f2e1;
  --lightgreen: #fdfdf9;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid #ccc;
  padding: 1rem;
  text-align: center;
}

th {
  background-color: var(--peppermint);
  font-weight: 400;
}

td {
  background-color: var(--lightgreen);
  font-weight: 300;
}

h2 {
  margin-bottom: 0;
  font-size: 1.6rem;
  letter-spacing: 2px;
  font-weight: 400;
}

small {
  max-width: 25ch;
  display: inline-block;
}

.price {
  font-size: 1.4rem;
  font-weight: 300;
  margin-bottom: 0.5rem;
}

hr {
  margin: 1rem 0;
  border-color: lightgray;
  border-top: none;
}

a,
#size-guide-btn {
  font-family: "Roboto Mono", monospace;
  color: var(--blue);
}

#size-guide-btn {
  border: 0;
  background: none;
  text-decoration: underline;
  padding: 0;
  cursor: pointer;
}

body {
  padding: 1rem;
}

figure {
  height: 550px;
  min-width: 300px;
  margin: 0;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

.size-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.size-list label {
  background: var(--gray-bg);
  padding: 0.5rem 1rem;
  display: inline-block;
}

.size-list input {
  display: none;
}

.size-list label:hover,
.size-list label:focus {
  color: var(--blue);
  outline: 1px solid;
}

.size-list li:has(:checked) {
  outline: 1px solid;
}

.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0 auto;
  max-width: 900px;
}

.color-list {
  margin-top: 1rem;
  padding: 0;
  display: flex;
  gap: 0.25rem;
}

.color-list li {
  font-size: 0;
  width: 1rem;
  height: 1rem;
  display: inline-block;
  border-radius: 50%;
  position: relative;
  border: 1px solid;
}

.quantity-label {
  display: block;
  margin: 1rem 0 0.5rem;
}

#quantity {
  font-size: 1.3rem;
  max-width: 3rem;
  margin-bottom: 1rem;
}

.add-to-cart-btn {
  border: 1px solid;
  font-weight: lighter;
  padding: 1rem;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  width: 100%;
  background: var(--darkblue);
  color: white;
}

.measurements {
  margin-top: 2rem;
}

.measurements-guide li {
  line-height: 1.5;
  list-style: disc;
  margin-left: 2rem;
  margin-top: 1rem;
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}