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