Create modals(popover) using html and CSS only with Popover API

There are thousands of libraries out there that have popovers for your application.

But in recent releases of CSS, they introduced a new API called Popover API.
 we can create Popover(modal) without any libraries and it has almost all browser support now.

To create a popover, we need to add an element with a popover attribute.

<article id="my-popover" popover>
</article>

For the content, you can add content inside the popover element.

<article id="my-popover" popover>
<p>my lovely lovely content</p>
</article>

Now, you need an action to trigger this popover.

<button popovertarget="my-popover"> Open Popover </button>

Popover elements are hidden with display: none until opened with an invoker such as a button or with JavaScript. To create a basic popover, set the popover attribute on the element, and link its ID to a button using popovertarget. Now, the button is the invoker,

Of course, you can change CSS styling:

[popover] {
  background: black;
  color: white;
  font-weight: 400;
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  max-width: 20ch;
  line-height: 1.4;
  top: 2rem;
  margin: 0 auto;
}



/* Animating the popover in */

/*   IS-OPEN STATE   */
[popover]:popover-open {
  translate: 0 0;
}

/*   EXIT STATE   */
[popover] {
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
  translate: 0 -22rem;
}

/*   0. BEFORE-OPEN STATE   */
@starting-style {
  [popover]:popover-open {
    translate: 0 -22rem;
  }
}

Live: 

Source: MDN