Modal ​

El componente SisdaiModal interrumpe el contenido y las interacciones principales de la página para colocar un elemento HTML <dialog/> de tipo modal encima que requiere toda la atención y acción de la persona usuaria. Consulte la sección del elemento dialog para más información.

Uso ​

Para utilizar el componente , incorpora en tu plantilla y coloca el contenido que deseas mostrar dentro del modal. Puedes controlar la apertura del modal mediante una referencia al componente y un método de apertura. A continuación, se muestra un ejemplo de etiqueta simple:

html
<SisdaiModal ref="sisdaiModal"> ...contenido </SisdaiModal>

Botón que acciona el modal:

html
<button @click="sisdaiModal?.abrirModal()">Abrir Modal</button>

Es importante colocar la clase .overflow-hidden con la propiedad overflow en hidden en la hoja de estilo CSS principal de la aplicación o en el body para interrumpir el desplazamiento (scroll) con el resto de la página.

css
/* css */
.overflow-hidden {
  overflow: hidden;
}

Vista simplificada

En la vista simplificada, el componente SisdaiModal funciona de la misma forma como lo hacen en la vista predeterminada. Solo el modal para visualizar imágenes a detalle no se utiliza, ya que en la vista simplificada no se muestran imágenes.

API ​

Este componente admite las siguientes propiedades, métodos y slots:

Propiedades ​

  • ref: referencia del componente para acceder al método abrirModal y cerrarModal mediante el evento de clic.
    • Tipo: String
    • Requerido: sí
  • tamanioModal: se puede elegir entre un tamaño grande del modal.
    • Tipo: String
    • Requerido: no

Métodos ​

  • abrirModal: abre el modal y agrega la clase .overflow-hidden al elemento body del documento.
  • cerrarModal: cierra el modal y remueve la clase .overflow-hidden al elemento body del documento.
  • siPresionaTeclaEscape: si la tecla ESC es presionada se remueve la clase .overflow-hidden al elemento body del documento.
  • clickFueraDelModal: si la persona usuaria da clic fuera del modal mientras este esté abierto, este se cerrará.

Eventos ​

Este componente no dispara eventos externos.

Slots ​

  • 'encabezado': en este se indica el título del modal.
  • 'cuerpo': en este se indica el cuerpo del modal.
  • 'pie': en este se indican los elementos de pie del modal, como botones.

Ejemplos de uso ​

Uso básico ​

Su ancho máximo es de 462 px equivalentes a 6 columnas.

vue
<script setup>
import { ref } from 'vue'
const sisdaiModal = ref(null)

const salida = ref()

function descargaAlgo() {
  sisdaiModal.value.cerrarModal()
  salida.value = 'descargando...'
}
</script>
<template>
  <div>
    <SisdaiModal ref="sisdaiModal">
      <template #encabezado>
        <h1 class="m-t-0 texto-tamanio-6">
          <span
            class="pictograma-archivo-descargar p-l-0 p-t-0"
            aria-hidden="true"
          ></span
          >Descargar datos con más de una línea
        </h1>
      </template>

      <template #cuerpo>
        <div class="grid">
          <div class="columna-16">
            <p class="m-t-0"><b>Selección de datos</b></p>
            <input
              id="radio1"
              type="radio"
              name="datos"
            />
            <label for="radio1">Todos los datos</label>
            <br />
            <input
              id="radio2"
              type="radio"
              name="datos"
            />
            <label for="radio2">Mi selección de datos</label>

            <p><b>Formato de archivo</b></p>
            <input
              id="radio3"
              type="radio"
              name="archivo"
            />
            <label for="radio3">.csv (Valores separados por comas)</label>
            <br />
            <input
              id="radio4"
              type="radio"
              name="archivo"
            />
            <label for="radio4">.xls (Archivo de Excel)</label>
          </div>
        </div>
      </template>

      <template #pie>
        <button
          type="button"
          class="boton-primario"
          value="descarga"
          @click="descargaAlgo()"
        >
          Descargar
        </button>
        <button
          type="button"
          class="boton-secundario"
          value="cancela"
          @click="sisdaiModal.cerrarModal()"
        >
          Cancelar
        </button>
      </template>
    </SisdaiModal>

    <button
      type="button"
      @click="sisdaiModal?.abrirModal()"
    >
      Modal Básico
    </button>
    <p>{{ salida }}</p>
  </div>
</template>

Su ancho máximo es de 1110 px equivalentes a 14 columnas.

vue
<script setup>
import { ref } from 'vue'

const sisdaiModal = ref(null)
</script>
<template>
  <div>
    <SisdaiModal
      ref="sisdaiModal"
      tamanioModal="modal-grande"
    >
      <template #encabezado>
        <h1 class="m-t-0">Título de modal grande</h1>
      </template>

      <template #cuerpo>
        <div class="flex flex-contenido-equidistante">
          <div class="columna-5-esc"></div>
          <div class="columna-6-esc"></div>
          <div class="columna-5-esc"></div>
        </div>
      </template>

      <template #pie>
        <button
          type="button"
          class="boton-primario"
          @click="sisdaiModal?.cerrarModal()"
          value="acepta"
        >
          Aceptar
        </button>
      </template>
    </SisdaiModal>

    <button
      type="button"
      @click="sisdaiModal?.abrirModal()"
    >
      Modal Grande
    </button>
  </div>
</template>

<style lang="scss" scoped>
.modal-cuerpo {
  .flex {
    row-gap: 24px;
    div {
      background-color: var(--fondo-neutro);
      height: 600px;
      border-radius: 20px;
      @media (max-width: 768px) {
        height: 50px;
      }
    }
  }
}
</style>

Mejores prácticas ​

  • Evita el desplazamiento (scroll) en el modal: si el contenido excede la altura de la pantalla, es posible que se deba repensar el uso del modal.
  • Utiliza el modal con precaución: el modal es un componente que genera una interrupción en la experiencia de la persona usuaria , por lo que su uso debe ser justificado.

Salir del modal ​

Para salir del modal, la persona usuaria puede:

  • Dar clic sobre el botón de salir (ícono de tache) ubicado en la esquina superior derecha de los modales.
  • Presionar la tecla ESC.
  • Dar clic fuera del modal.