Criando modal/popover sem JS e CSS em 1 min!

Juro que não é clickbait, existe uma nova funcionalidade no HTML que ainda é desconhecida por muitos que é o atributo popover, vou te ensinar a fazer a magia passo a passo, tomemos de exemplo essa tela:

<main>
  <div>
    <h2 class="no-margin">Hey, It's Iury Nogueira.</h2>
    <h2 class="no-margin">Fullstack Developer</h2>
  </div>

  <p id="info">I've been working as a full stack <b>web developer</b> for 10 years</p>

  <button>More details</button>
</main>

e você quer que o texto no parágrafo com id="info" apareça em um modal quando for clicado no botão de More details, para isso você só precisa informar quem vai ficar no modal com o atributo popover:

<p id="info" popover>I've been working as a full stack <b>web developer</b> for 10 years</p>

ao fazer isso vai notar que ele sumiu da sua página, agora você só precisa "conecta-lo" a uma ação, para isso vamos usar o atributo popovertarget:

<button popovertarget="info">More details</button>

com isso ele vai abrir o parágrafo que tem o id "info", pronto! O resultado é esse:

se você clicar fora do conteúdo vai notar que ele fecha também assim como um modal. Espero ter contribuído com essa dica, se você acha que outra pessoa desconheça compartilha esse post com ela, vlw! :D