Popover con cierre explícito en HTML5

En el artículo de hoy vamos a ver cómo crear un popover con cierre explícito en HTML5, es decir, que haya que cerrar mediante un botón o una imagen de un aspa la ventana emergente y que no sirva simplemente con pulsar fuera del mensaje. Ya hemos visto que la evolución del lenguaje HTML5 nos ha ofrecido nuevos elementos como popover para mostrar ventanas emergentes. Pero, en ese caso, vimos como aplicar un elemento popover con un cierre sencillo al pulsar fuera de la ventana emergente.

Crear un popover con cierre explícito en HTML5

Lo primero que tenemos que hace es utilizar el elemento popover para crear nuestro mensaje emergente. Si recordamos la sintaxis de este atributo de HTML vemos que hay varias formar de abrirlo.

<div popover="tipo">Contenido del popover</div>

Por defecto, el elemento popover se abre en un modelo "auto", que es el que permite cerrar el mensaje emergente simplemente haciendo click fuera del mensaje. En este caso, para poder crear un popover con cierre explícito en HTML5 vamos a abrirlo con el tipo "manual". Por lo tanto codificamos el elemento popover de la siguiente forma:

<div id="mipopover" popover="manual">Contenido del popover</div>

Ahora lo que necesitamos es crear nuestro botón que permita mostrar el popover en la pantalla del navegador web. Para ello utilizamos el siguiente código que se apoya en el atributo popovertarget del elemento button:

<button popovertarget="mipopover">Mostrar Popover</button>

Vemos que tanto el atributo id del elemento popover como el elemento popovertarget del elemento button coinciden.

Ya tenemos de un mensaje emergente, el cual, además, no puede cerrarse simplemente tocando fuera de él. Es por ello que tenemos que añadirle más elementos.

Gestión del cierre del popover en Javascript

Lo primero que haremos será crear un elemento button dentro del elemento popover. Y es que, este elemento botón, será el que nos ayude a cerrar la ventana emergente.

<div id="mipopover" popover="manual">
  Contenido del popover
  <button>Cerrar</button>
</div>

En vez de este botón podríamos haber añadido una imagen con un aspa, un simple enlace o cualquier otro elemento que fuese accionable para poder realizar el cierre de la ventana.

Ahora lo que vamos añadir el es código Javascript que nos permite cerrar la ventana. Para ello tenemos que llamar al método hidePopover() sobre el elemento que contiene el mensaje emergente.

El método hidePopover() es un método del modelo DOM que se encuentra dentro del elemento base HTMLElement.

Para ello nos apoyamos en un evento onclick sobre el elemento button para poder asociar este cierre del mensaje.

<div id="mipopover" popover="manual">
  Contenido del popover
  <button onclick="document.getElementById('mipopover').hidePopover()">Cerrar</button>
</div>

De esta forma ya habremos conseguido crear un popover con cierre explicito en HTML5 que cerramos mediante código Javascript.