Dialog
Mostrar parámetros
Parámetros del componente
params:
- name: button
type: component
required: true
description: Button component to intereact with the dialog.
- name: labelledId
type: string
required: true
description: Required id attribute to reference with aria-labelledby in the div container tag.
- name: id
type: string
required: true
description: Required id attribute to add to the div container tag.
- name: classes
type: string
required: false
description: Classes to add to the div container tag.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the div container tag.
- name: caller
type: nunjucks-block
required: true
description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire item component in a `call` block.
Modal lanzado con un 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
Aviso
Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas.
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 bg-white">
<h2 id="label-default-example" class="c-h2 px-base text-center focus:outline-none 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-none" 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 %}
HTML
<!-- dialog -->
<!-- button -->
<button class="c-button" onclick="openDialog('default', this, 'label-default-example')" id="button-label-default-example">
Abrir modal
</button>
<!-- /button -->
<div id="default" class="hidden lg:absolute lg:inset-0 min-h-screen" 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 bg-white">
<h2 id="label-default-example" class="c-h2 px-base text-center focus:outline-none 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-none" 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 -->
</div>
<!-- /dialog -->
Modal lanzado con un dialog con acciones secundarias #
Editar servicio publicado
Los cambios realizados no serán visibles hasta que sean validados
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 bg-white">
<h2 id="label-secondary-action-example" class="c-h2 px-base text-center focus:outline-none focus:underline" tabindex="-1">
Editar servicio publicado
</h2>
<div class="c-paragraph-base my-base text-center">
Actualmente este servicio está publicado. <br>Los cambios realizados no serán visibles hasta que sean validados
</div>
<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-none" 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 %}
HTML
<!-- dialog -->
<!-- button -->
<button class="c-button" onclick="openDialog('secondary', this, 'label-secondary-action-example')" id="button-label-secondary-action-example">
Abrir modal con acciones secundarias
</button>
<!-- /button -->
<div id="secondary" class="hidden lg:absolute lg:inset-0 min-h-screen" 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 bg-white">
<h2 id="label-secondary-action-example" class="c-h2 px-base text-center focus:outline-none focus:underline" tabindex="-1">
Editar servicio publicado
</h2>
<div class="c-paragraph-base my-base text-center">
Actualmente este servicio está publicado. <br>Los cambios realizados no serán visibles hasta que sean validados
</div>
<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-none" 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 -->
</div>
<!-- /dialog -->
Modal lanzado con un dialog con javascript #
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.
Servicio publicado
Los cambios realizados no serán visibles hasta que sean validados
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 bg-white">
<h2 id="label-javascript-action-example" class="c-h2 px-base text-center focus:outline-none focus:underline" tabindex="-1">
Servicio publicado
</h2>
<div class="c-paragraph-base my-base text-center">
Actualmente este servicio está publicado. <br>Los cambios realizados no serán visibles hasta que sean validados
</div>
<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-none" 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 %}
HTML
<!-- dialog -->
<!-- button -->
<button class="c-button" onclick="openDialog('modal-javascript', this, 'label-javascript-action-example')" id="button-javascript-action-example">
Abrir modal con JavaScript
</button>
<!-- /button -->
<div id="modal-javascript" class="hidden lg:absolute lg:inset-0 min-h-screen" 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 bg-white">
<h2 id="label-javascript-action-example" class="c-h2 px-base text-center focus:outline-none focus:underline" tabindex="-1">
Servicio publicado
</h2>
<div class="c-paragraph-base my-base text-center">
Actualmente este servicio está publicado. <br>Los cambios realizados no serán visibles hasta que sean validados
</div>
<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-none" 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 -->
</div>
<!-- /dialog -->