desy-html

Dialog

Parámetros Nunjucks del componente: "Dialog". Versión: 12.1.0

Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.

        {"val":"params:\r\n- name: button\r\n  type: component\r\n  required: true\r\n  description: Button component to intereact with the dialog.\r\n- name: labelledId\r\n  type: string\r\n  required: true\r\n  description: Required id attribute to reference with aria-labelledby in the div container tag.\r\n- name: id\r\n  type: string\r\n  required: true\r\n  description: Required id attribute to add to the div container tag.\r\n- name: classes\r\n  type: string\r\n  required: false\r\n  description: Classes to add to the div container tag.\r\n- name: attributes\r\n  type: object\r\n  required: false\r\n  description: HTML attributes (for example data attributes) to add to the div container tag.\r\n- name: caller\r\n  type: nunjucks-block\r\n  required: true\r\n  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.\r\n","length":1069}

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

Ejemplo: "Modal lanzado con un dialog", de código HTML, para maquetar el componente: "Dialog", versión: 12.1.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- dialog -->
<!-- button -->
<button class="c-button" onclick="openDialog(&#39;default&#39;, this, &#39;label-default-example&#39;)" 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 -->

Ejemplo: "Modal lanzado con un dialog", de código Nunjucks, para maquetar el componente: "Dialog", versión: 12.1.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


{% 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  %}
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  %}

Ejemplo: "Modal lanzado con un dialog con acciones secundarias", de código HTML, para maquetar el componente: "Dialog", versión: 12.1.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- dialog -->
<!-- button -->
<button class="c-button" onclick="openDialog(&#39;secondary&#39;, this, &#39;label-secondary-action-example&#39;)" 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 -->

Ejemplo: "Modal lanzado con un dialog con acciones secundarias", de código Nunjucks, para maquetar el componente: "Dialog", versión: 12.1.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


{% 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  %}
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  %}

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.

Ejemplo: "Modal lanzado con un dialog con javascript", de código HTML, para maquetar el componente: "Dialog", versión: 12.1.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- dialog -->
<!-- button -->
<button class="c-button" onclick="openDialog(&#39;modal-javascript&#39;, this, &#39;label-javascript-action-example&#39;)" 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 -->

Ejemplo: "Modal lanzado con un dialog con javascript", de código Nunjucks, para maquetar el componente: "Dialog", versión: 12.1.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.


{% 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  %}
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  %}