DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Modal

Avisos

Se trata de una ventana emergente o pop-up y se emplean cuando queremos centrar toda la atención en cierta información, generalmente, cuando se requiere alguna acción antes de continuar con el proceso.

Dialog

Un dialog es un componente que permite mostrar otro componente que se muestra sobre la página, con una capa negra semitransparente por debajo. Se utiliza para mostrar modales o para mostrar el menú móvil de la cabecera. Si haces click en la capa negra de debajo o si pulsas la tecla Esc se cierra el contenido del Dialog. Mira el código para ver cómo usamos la función openDialog, el primer parámetro es el id del contenido a mostrar, el segundo parámetro es el nodo que debe tomar foco al cerrar el dialog, y el tercer elemento es el id del elemento al que se le da el foco al abrir el contenido. En este ejemplo de modal usamos los atributos de accesibilidad: 'role':'dialog' y 'aria-modal': true

Descripción visual

Sección rectangular con fondo gris muy claro y borde gris medio de 1px. Contiene título en texto negro de peso regular, alineado a la izquierda. Botón con texto azul "Abrir modal", borde azul de 1px, fondo transparente, esquinas ligeramente redondeadas, ubicado debajo del título.

Mostrar códigodel ejemplo: Modal lanzado con un dialog

Contenido

Nunjucks macro

{% from "components/dialog/_macro.dialog.njk" import componentDialog %}
{% call componentDialog({
  "button": {
    "text": "Abrir modal",
    "attributes": {
      "onclick": "openDialog('default', this, 'label-default-example')",
      "id": "button-label-default-example"
    }
  },
  "id": "default",
  "classes": "hidden lg:absolute lg:inset-0 min-h-screen",
  "attributes": {
    "role": "dialog",
    "aria-labelledby": "label-default-example",
    "aria-modal": true
  }
}) %}
<!-- modal -->
<div id="default-example" class="mt-16 sm:mt-0 relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded-sm bg-white">
  <h2 id="label-default-example" class="c-h2 px-base text-center focus:outline-hidden focus:underline" tabindex="-1">
    Aviso
  </h2>
  <p class="c-p my-base text-center">
    Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas.
  </p>
  <div class="flex flex-wrap gap-sm w-full justify-center">
    <div class="mt-sm">
      
      
      <!-- button -->
      <button class="c-button c-button--primary"  onclick="closeDialog(this)">
        De acuerdo, continuar
      </button>
      <!-- /button -->
    </div>
  </div>
  <div class="absolute top-0 right-0 p-sm lg:p-base">
    <button onclick="closeDialog(this)" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-hidden" aria-label="X: Cerrar la ventana emergente" type="button">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
    </button>
  </div>
</div>
<!-- /modal -->
{% endcall  %}

Descripción visual

Sección rectangular con fondo gris muy claro y borde gris medio de 1px. Contiene título en texto negro de peso regular, alineado a la izquierda. Botón con texto azul "Abrir modal con acciones secundarias", borde azul de 1px, fondo transparente, esquinas ligeramente redondeadas, ubicado debajo del título.

Mostrar códigodel ejemplo: Modal lanzado con un dialog con acciones secundarias

Contenido

Nunjucks macro

{% from "components/dialog/_macro.dialog.njk" import componentDialog %}
{% call componentDialog({
  "button": {
    "text": "Abrir modal con acciones secundarias",
    "attributes": {
      "onclick": "openDialog('secondary', this, 'label-secondary-action-example')",
      "id": "button-label-secondary-action-example"
    }
  },
  "id": "secondary",
  "classes": "hidden lg:absolute lg:inset-0 min-h-screen",
  "attributes": {
    "role": "dialog",
    "aria-labelledby": "secondary-action-example",
    "aria-modal": true
  }
}) %}
<!-- modal -->
<div id="secondary-action-example" class="mt-16 sm:mt-0 relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded-sm bg-white">
  <h2 id="label-secondary-action-example" class="c-h2 px-base text-center focus:outline-hidden focus:underline" tabindex="-1">
    Editar servicio publicado
  </h2>
  <p class="c-p my-base text-center">
    Actualmente este servicio está publicado. Los cambios realizados no serán visibles hasta que sean validados
  </p>
  <div class="flex flex-wrap gap-sm w-full justify-between">
    <div class="mt-sm">
      
      
      <!-- button -->
      <button class="c-button c-button--primary" >
        Editar servicio
      </button>
      <!-- /button -->
    </div>
    <div class="mt-sm">
      
      
      <!-- button -->
      <button class="c-button"  onclick="closeDialog(this)">
        Cancelar <span class="sr-only">y cerrar la ventana modal</span>
      </button>
      <!-- /button -->
    </div>
  </div>
  <div class="absolute top-0 right-0 p-sm lg:p-base">
    <button onclick="closeDialog(this)" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-hidden" aria-label="X: Cerrar la ventana emergente" type="button">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
    </button>
  </div>
</div>
<!-- /modal -->
{% endcall  %}

También puedes usar con javascript la función global openDialog(dialog, focusAfterClosed, focusFirst), para abrir la modal usando su id. La función admite tres parámetros dialog, que es el id de la modal que queremos abrir, focusAfterClosed, el elemento que tendrá el foco cuando cerremos la modal, y focusFirst, el elemento que tendra el foco al abrir la modal. Ej: Abre la consola del navegador y escribe openDialog('modal-javascript', 'button-javascript-action-example', 'label-javascript-action-example') para mostrar la modal.

Descripción visual

Sección rectangular con fondo gris muy claro y borde gris medio de 1px. Contiene título en texto negro de peso regular, alineado a la izquierda. Botón con texto azul "Abrir modal con JavaScript", borde azul de 1px, fondo transparente, esquinas ligeramente redondeadas, ubicado debajo del título.

Mostrar códigodel ejemplo: Modal lanzado con un dialog con javascript

Contenido

Nunjucks macro

{% from "components/dialog/_macro.dialog.njk" import componentDialog %}
{% call componentDialog({
  "button": {
    "text": "Abrir modal con JavaScript",
    "attributes": {
      "onclick": "openDialog('modal-javascript', this, 'label-javascript-action-example')",
      "id": "button-javascript-action-example"
    }
  },
  "id": "modal-javascript",
  "classes": "hidden lg:absolute lg:inset-0 min-h-screen",
  "attributes": {
    "role": "dialog",
    "aria-labelledby": "javascript-action-example",
    "aria-modal": true
  }
}) %}
<!-- modal -->
<div id="javascript-action-example" class="mt-16 sm:mt-0 relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded-sm bg-white">
  <h2 id="label-javascript-action-example" class="c-h2 px-base text-center focus:outline-hidden focus:underline" tabindex="-1">
    Servicio publicado
  </h2>
  <p class="c-p my-base text-center">
    Actualmente este servicio está publicado. Los cambios realizados no serán visibles hasta que sean validados
  </p>
  <div class="flex flex-wrap gap-sm w-full justify-center">
    <div class="mt-sm">
      
      
      <!-- button -->
      <button class="c-button"  onclick="closeDialog(this)">
        Cerrar
      </button>
      <!-- /button -->
    </div>
  </div>
  <div class="absolute top-0 right-0 p-sm lg:p-base">
    <button onclick="closeDialog(this)" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-hidden" aria-label="X: Cerrar la ventana emergente" type="button">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
    </button>
  </div>
</div>
<!-- /modal -->
{% endcall  %}