<main>
  <button class="blue button fill elevated" popovershowtarget="window">
    Show Prompt
  </button>
  <div popover="manual" defaultopen id="window">
    <div class="window">
      <div class="title-bar">
        <div class="title-bar-text">Manual Pop-up</div>
        <div class="title-bar-controls">
          <button aria-label="Close" popoverhidetarget="window"></button>
        </div>
      </div>
      <div class="window-body">
        <p>The only way to remove me is via a trigger element, or with JavaScript.</p>
        <button popoverhidetarget="window">Close</button>
      </div>
    </div>
  </div>
</main>
@layer normalize, open-props, base, xp, demo;

@import url(https://unpkg.com/xp.css) layer(xp);

@layer base {
  *,
  *:after,
  *:before {
    box-sizing: border-box;
  }

  body {
    display: grid;
    place-items: center;
    min-height: 100vh;
    font-family: Arial, system-ui;
    align-content: center;
  }

  :where([popover]) {
    margin: auto;
    border-width: initial;
    border-style: solid;
  }
}

@layer demo {
  [popover] {
    padding: var(--size-4);
  }
  [popover] {
    transform: translate(-50%, -50%) translateX(calc(var(--offset-x, 0) * 50%))
      translate(calc(var(--x, 0) * 2vmin), calc(var(--y, 0) * 2vmin))
      translateX(calc(var(--slide-x, 0) * -10%));
    position: fixed;
    top: 50%;
    left: 50%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
  }

  .window-body {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
  }

  .window-body p {
    padding: var(--size-2);
    font-family: Arial;
    font-size: 12px;
  }

  .title-bar {
    min-height: 28px;
  }

  .title-bar-controls button {
    height: 21px;
  }
  button {
    height: auto;
    color: #000;
  }
}

External CSS

  1. https://codepen.io/web-dot-dev/pen/XWqWYgB.css
  2. https://codepen.io/web-dot-dev/pen/ZExZWBQ.css

External JavaScript

  1. https://codepen.io/web-dot-dev/pen/XWqWYgB.js
  2. https://codepen.io/web-dot-dev/pen/ZExZWBQ.js