Modal

Componente modal del Kit Digital USS

El componente Modal es un componente que se utiliza para mostrar un contenido adicional en una ventana emergente. El modal se utiliza para mostrar información que no es relevante para la página actual, pero que puede ser útil para el usuario.

El componente Modal se cierra al hacer click en el botón de cerrar en la esquina superior derecha, al presionar escape o al hacer click fuera del modal.

El componente Modal maneja la siguiente estructura:

1<dialog class="uss-modal" data-uss-modal-id="modal-1">
2  <div class="uss-modal__body">
3    <div class="uss-modal__icon uss-modal__icon--sm uss-modal__icon--info">
4      <i class="uss-icon ri-information-line"></i>
5    </div>
6    <div class="w-100 uss-modal__body-content">
7      <h4>Consectetur adipiscing #1</h4>
8      <p>
9        Lectus magna fringilla urna, porttitor rhoncus dolor purus non enim
10        praesent elementum facilisis leo, vel fringilla est ullamcorper eget
11        nulla facilisi etiam dignissim diam quis
12      </p>
13    </div>
14  </div>
15  <div class="uss-modal__footer">
16    <a
17      href="#"
18      class="uss-btn uss-btn--secondary col-3 justify-content-center"
19      data-uss-modal-close-on-click
20    >
21      Volver
22    </a>
23    <a
24      href="#"
25      class="uss-btn uss-btn--primary col-3 justify-content-center"
26      data-uss-modal-close-on-click
27      onclick="alert('Acción de prueba')"
28    >
29      Acción
30    </a>
31  </div>
32</dialog>

El componente Modal puede ser activado desde un botón o desde su instancia alojada en el objeto window dentro del array componentModalInstances siendo identificado por el atributo data-uss-modal-id que se le asigna en el markup html.

Pudiendo ser activado de la siguiente manera:

1<button class="uss-btn uss-btn--primary" data-uss-modal-open-on-click="modal-1">
2  Abrir modal
3</button>

O bien:

1// open modal
2window.componentModalInstances["modal-1"].openModal();
3
4// close modal
5window.componentModalInstances["modal-1"].closeModal();

1Cargando...

1Cargando...