CSS Popover

• ui
• popover
• modal

Output

Code

<style>
button[popovertarget] {
    padding: 0.5rem 1rem;
}
.css-popover {
    opacity: 1;
    padding: 3rem;
    &:popover-open {
        opacity: 1;
        transform: translate(0%, 0%);
    }

    &:popover-open::backdrop {
        opacity: 1;
    }

    @starting-style {
        &:popover-open {
            opacity: 0;
            transform: translate(-100%, 0%);
        }
        &:popover-open::backdrop {
            opacity: 0;
        }
    }
}
</style>

<button
popovertarget="modal"

> Open modal</button>

<div 
    id="modal"
    popover="auto"
    role="menu"
    class="css-popover"
>

    <div>
        <p>
            This is a popover
        </p>
            <button
              popovertarget="modal"
              popovertargetaction="hide"
            >Close modal</button>
        </p>
    </div>

</div>