DEV Community

Cover image for Crear modal de diálogo nativo con HTML
Jordi Ayala
Jordi Ayala

Posted on • Edited on • Originally published at asjordi.dev

2

Crear modal de diálogo nativo con HTML

Generalmente para crear un modal se utiliza JavaScript, pero actualmente se puede crear un modal de diálogo nativo utilizando solo HTML, por lo que resulta interesante conocerlo.

La estructura del elemento dialog es la siguiente, considerando que puede tener un estado que indica si esta abierto o no.

<dialog open>
    <p>Hola!</p>
</dialog>
Enter fullscreen mode Exit fullscreen mode

El código anterior renderiza el modal de diálogo con el texto "Hola! Soy un modal de diálogo" y el estado abierto por defecto.

Image description

Abrir dinámicamente el modal

Usualmente un modal se abre con una determinada acción, por ejemplo un clic en un botón. Para esto el elemento dialog tiene una API de JavaScript que nos permite abrirlo de forma dinámica. Solo es necesario asignarle un identificador.

<dialog id="mydialog">
    <p>Hola! Solo me muestro con un clic</p>
</dialog>
Enter fullscreen mode Exit fullscreen mode

Asignado el identificador podemos abrirlo de la siguiente forma.

window.mydialog.show();
Enter fullscreen mode Exit fullscreen mode

Asi mismo, se puede abrir de una manera más explicita utilizando el método showModal(). Este método abre el modal de diálogo de forma modal, y permite tener un fondo y centrar el modal de diálogo.

window.mydialog.showModal();
Enter fullscreen mode Exit fullscreen mode

Hasta aquí puede resultar raro mostrar el modal de diálogo directamente, por lo que se puede agregar un botón para esta acción.

<button onclick="window.mydialog.showModal();">Mostrar modal</button>
<dialog id="mydialog">
    <p>Hola! Solo me muestro con un clic</p>
</dialog>
Enter fullscreen mode Exit fullscreen mode

Cerrar el modal

Hay dos maneras de cerrar el modal de diálogo, la primera es utilizando el método close() de la API de JavaScript.

<button onclick='window.mydialog.close();'>Cerrar modal</button>
Enter fullscreen mode Exit fullscreen mode

Mientras que la segunda manera es utilizando un formulario con el método dialog dentro del elemento dialog, tal y como se muestra a continuación.

<form method="dialog">
    <button>Cerrar</button>
</form>
Enter fullscreen mode Exit fullscreen mode

Personalizar el modal

El elemento dialog tiene una serie de atributos que nos permiten personalizar el modal de diálogo, como el tamaño, el color de fondo, el color de texto, etc.

A continuación se agrega un estilo para modificar el color de fondo utilizando el pseudo-elemento ::backdrop.

dialog::backdrop {
  background: rgba(255, 255, 0, 0.1);
}
Enter fullscreen mode Exit fullscreen mode

Ahora se debería ver de la siguiente manera.

Image description

El elemento dialog tiene un soporte muy bueno, por lo que no debería haber problemas para utilizarlo. Se puede consultar en el sitio caniuse.com.

En general resulta interesante conocer este elemento, ya que permite crear un modal de diálogo nativo utilizando solo HTML sin la necesidad de utilizar JavaScript, además de que puede ser personalizado.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay