HTML

  
   <button
    popovertarget="mensaje"
    popovertargetaction="toggle">Mostrar mensaje</button>
  <div id="mensaje" popover>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
    Ratione possimus, qui animi, harum, maiores error officia nam officiis
    deleniti nesciunt ullam odio libero ducimus natus cupiditate
    ea in culpa! Inventore?</p>
  </div>
  

CSS

  
    button {
      padding: 8px;
      margin: 1rem 0;
      border: none;
      box-shadow: black 0 0 4px;
      cursor: pointer;
    }
    
    [popover] {
      background: #222;
      border: 0;
      border-bottom: 5px solid gold;
      color: white;
      padding: 0.05rem 1.25rem;
    }
    
    [popover]::backdrop {
      background: #000a;
      backdrop-filter: blur(2px);
    }
    
    [popover]:popover-open {
      color: gold;
      width: 300px;
      height: 400px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: auto;
    }