HTML 팝오버 속성: Z-색인 싸움이 없는 메뉴와 패널

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Popover without JavaScript</title>
<style>
  body {
    margin: 0; padding: 16px; font-family: system-ui, sans-serif;
    background: #f4f5f7; color: #1d2330;
  }
  .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .col { background: #fff; border-radius: 12px; padding: 12px; }
  h2 { font-size: 15px; margin: 0 0 4px; }
  p { font-size: 13px; color: #555; margin: 0 0 10px; }
  button {
    font: inherit; font-size: 14px; padding: 7px 12px; margin: 0 4px 6px 0;
    border: 1px solid #c9ced8; border-radius: 8px; background: #fff; cursor: pointer;
  }
  /* A popover is position: fixed and centred by default. Place these two by hand. */
  [popover] {
    inset: auto; top: 190px; margin: 0; width: calc(50% - 50px);
    border: 0; border-radius: 10px; padding: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18); font-size: 14px;
  }
  #auto-pop { left: 24px; background: #e8f1ff; }
  #manual-pop { right: 24px; background: #fff4e0; }
</style>
</head>
<body>
<div class="cols">
  <div class="col">
    <h2>popover (auto)</h2>
    <p>Closes on a click outside or Esc.</p>
    <button popovertarget="auto-pop">Toggle</button>
  </div>
  <div class="col">
    <h2>popover="manual"</h2>
    <p>Stays open until a button closes it.</p>
    <button popovertarget="manual-pop" popovertargetaction="show">Show</button>
    <button popovertarget="manual-pop" popovertargetaction="hide">Hide</button>
  </div>
</div>

<div id="auto-pop" popover>
  <b>Auto popover</b><br>Click anywhere else, or press Esc.
</div>

<div id="manual-pop" popover="manual">
  <b>Manual popover</b><br>Clicks outside do nothing. Use Hide.
</div>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Styling a popover</title>
<style>
  body {
    margin: 0; padding: 16px; font-family: system-ui, sans-serif;
    background: #f4f5f7; color: #1d2330;
  }
  button {
    font: inherit; font-size: 14px; padding: 8px 14px; border-radius: 8px;
    border: 1px solid #c9ced8; background: #fff; cursor: pointer;
  }
  .open-btn { background: #2563eb; border-color: #2563eb; color: #fff; }
  #note, #log { font-size: 13px; color: #555; margin: 12px 0 0; }
  #log { font-family: ui-monospace, Consolas, monospace; }

  /* Closed state: also the state it animates from and back to */
  #tip {
    width: min(300px, 80vw); border: 0; border-radius: 14px; padding: 18px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
    opacity: 0; translate: 0 16px;
    transition: opacity .25s, translate .25s,
                display .25s allow-discrete, overlay .25s allow-discrete;
  }
  /* Open state */
  #tip:popover-open { opacity: 1; translate: 0 0; }
  /* Where the entry animation starts (browsers without @starting-style skip it) */
  @starting-style {
    #tip:popover-open { opacity: 0; translate: 0 16px; }
  }
  /* The layer between the popover and the page */
  #tip::backdrop { background: rgba(15, 23, 42, .45); }
  #tip h3 { margin: 0 0 6px; font-size: 17px; }
  #tip p { margin: 0 0 14px; font-size: 14px; line-height: 1.45; }
</style>
</head>
<body>
<button class="open-btn" popovertarget="tip">What's new</button>
<p id="note"></p>
<p id="log">toggle events will show here</p>

<div id="tip" popover>
  <h3>Popovers can be styled</h3>
  <p>This one fades in, dims the page with ::backdrop and still closes on Esc or a click outside.</p>
  <button popovertarget="tip" popovertargetaction="hide">Got it</button>
</div>

<script>
  // Feature check: does this browser know @starting-style?
  const hasStart = 'CSSStartingStyleRule' in window;
  document.getElementById('note').textContent = hasStart
    ? '@starting-style is supported here: the popover fades in and out.'
    : 'No @starting-style here: the popover appears without the fade-in.';

  // toggle fires after the popover opens or closes
  const log = document.getElementById('log');
  document.getElementById('tip').addEventListener('toggle', (e) => {
    log.textContent = 'toggle: ' + e.oldState + ' -> ' + e.newState;
  });
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Account menu and toasts with popover</title>
<style>
  body { margin: 0; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
  header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; background: #fff; box-shadow: 0 1px 0 #e1e4ea;
  }
  .logo { font-weight: 700; }
  .avatar {
    width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
    background: linear-gradient(135deg, #6366f1, #06b6d4); color: #fff; font-weight: 700;
  }
  main { padding: 16px; }
  main p { font-size: 14px; color: #555; margin: 0 0 10px; }
  .act {
    font: inherit; font-size: 14px; padding: 8px 12px; margin: 0 6px 6px 0;
    border: 1px solid #c9ced8; border-radius: 8px; background: #fff; cursor: pointer;
  }

  /* Account menu: an auto popover placed by the script under the avatar */
  #menu {
    inset: auto; margin: 0; padding: 6px; min-width: 190px;
    border: 1px solid #e1e4ea; border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
  }
  #menu .who { padding: 8px 10px; font-size: 13px; color: #555; border-bottom: 1px solid #eef0f3; }
  #menu button {
    display: block; width: 100%; text-align: left; font: inherit; font-size: 14px;
    padding: 9px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  }
  #menu button:hover, #menu button:focus-visible { background: #f1f4f9; }

  /* Toasts: manual popovers stacked in the bottom-right corner */
  .toast {
    inset: auto; right: 12px; margin: 0; width: min(260px, calc(100vw - 24px));
    box-sizing: border-box; padding: 12px 36px 12px 14px; border: 0; border-radius: 10px;
    background: #1d2330; color: #fff; font-size: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25); transition: bottom .2s;
  }
  .toast button {
    position: absolute; top: 6px; right: 6px; border: 0; background: none;
    color: #cbd5e1; font-size: 18px; line-height: 1; cursor: pointer;
  }
</style>
</head>
<body>
<header>
  <span class="logo">Acme</span>
  <button class="avatar" id="avatar" popovertarget="menu" aria-label="Account">JL</button>
</header>

<main>
  <p>Open the account menu, then click outside it. Buttons below add toasts, which stay until closed or timed out.</p>
  <button class="act" data-msg="Draft saved">Save</button>
  <button class="act" data-msg="Link copied">Copy link</button>
</main>

<div id="menu" popover>
  <div class="who">Signed in as <b>jl@example.com</b></div>
  <button data-msg="Profile opened">Profile</button>
  <button data-msg="Settings opened">Settings</button>
  <button data-msg="Signed out (demo)">Sign out</button>
</div>

<script>
  const avatar = document.getElementById('avatar');
  const menu = document.getElementById('menu');

  // Place the menu under the avatar, right edges lined up, just before it opens
  menu.addEventListener('beforetoggle', (e) => {
    if (e.newState !== 'open') return;
    const r = avatar.getBoundingClientRect();
    menu.style.top = (r.bottom + 8) + 'px';
    menu.style.right = Math.max(8, innerWidth - r.right) + 'px';
  });

  // Menu items: close the menu, then report with a toast
  menu.querySelectorAll('button').forEach((b) => b.addEventListener('click', () => {
    menu.hidePopover();
    toast(b.dataset.msg);
  }));
  document.querySelectorAll('.act').forEach((b) =>
    b.addEventListener('click', () => toast(b.dataset.msg)));

  // Each toast is its own manual popover, so light dismiss never closes it
  const toasts = [];
  function toast(text) {
    const t = document.createElement('div');
    t.className = 'toast';
    t.popover = 'manual';
    t.textContent = text;
    const x = document.createElement('button');
    x.textContent = '×';  // the multiplication sign as a close icon
    x.setAttribute('aria-label', 'Close');
    x.addEventListener('click', () => remove(t));
    t.append(x);
    document.body.append(t);
    t.showPopover();
    toasts.push(t);
    stack();
    setTimeout(() => remove(t), 4000);
  }
  function remove(t) {
    if (!t.isConnected) return;
    t.hidePopover();
    t.remove();
    toasts.splice(toasts.indexOf(t), 1);
    stack();
  }
  // Newest toast at the bottom, older ones pushed up
  function stack() {
    let bottom = 12;
    for (let i = toasts.length - 1; i >= 0; i--) {
      toasts[i].style.bottom = bottom + 'px';
      bottom += toasts[i].offsetHeight + 8;
    }
  }
</script>
</body>
</html>