GEF
Menú

Modal

Ventana modal que puede emplearse en galerías, visualización de contenidos o diálogos.

Contenido

Estructura de la ventana modal, con las clases anidadas .modal, .modal__dialog, .modal__content, y en su interior, los bloques con las clases .modal__header y .modal__body. El título tendrá la clase .modal__title para que no se solape con el icono.

Ventana modal

<div class="modal">
  <div role="dialog" aria-labelledby="modal-title1" aria-describedby="modal-body1" class="modal__dialog" data-modal-dialog>
    <div class="modal__content">
      <div class="modal__header">
        <button aria-label="Cerrar" class="modal__close">
          <span aria-hidden="true" class="icon icon--close"></span>
          <span class="icon-alt">Cerrar</span>
        </button>
        <h4 id="modal-title1" class="h4">Modal title</h4>
      </div>
      <div id="modal-body1" class="modal__body">
        <p>...</p>
      </div>
    </div>
  </div>
</div>

Enlace con el id de la ventana modal a mostrar y el atributo data-modal-trigger. Al div con la clase .modal se le agrega también el atributo data-modal para vincular el comportamiento JS.

Lanzador de ventana modal

Lanzar modal 
<a href="#modal-1" title="Abrir ventana modal" aria-label="Abrir ventana modal" role="button" data-modal-trigger class="btn btn--primary">Lanzar modal</a>

Ventana modal que no desaparece al hacer clic en el fondo. Se puede emplear en diálogos y como prevención de cierre por accidente cuando se muestra información que se considere crítica. Al div con la clase .modal se le debe agregar el atributo data-modal-blocked.

Se puede agregar un enlace o botón con el atributo data-modal-close para crear un elemento que cierre el modal. Si se desea que dicho botón realice su acción por defecto (enviar un formulario, seguir un enlace...) se puede usar en su lugar data-modal-action, el cual que no previene la acción por defecto (a diferencia de data-modal-close).

Modal con fondo bloqueado

Lanzar modal 
<a href="#modal-2" title="Abrir ventana modal" aria-label="Abrir ventana modal" role="button" data-modal-trigger class="btn btn--primary">Lanzar modal</a>
<div data-modal data-modal-blocked id="modal-2" class="modal">
  <div role="dialog" aria-hidden="true" aria-labelledby="modal-title3" aria-describedby="modal-body3" data-modal-dialog class="modal__dialog">
    <div class="modal__content">
      <div class="modal__header">
        <button data-modal-close title="Cerrar ventana modal" aria-label="Cerrar ventana modal" class="modal__close">
          <span aria-hidden="true" class="icon icon--close"></span>
          <span class="icon-alt">Cerrar</span>
        </button>
        <h4 id="modal-title3" class="h4">Modal title</h4>
      </div>
      <div id="modal-body3" class="modal__body">
        <p>...</p>
      </div>
    </div>
  </div>
</div>

Una ventana modal puede convertirse en diálogo de acción (confirmar acción o decidir acción) si se emplea el atributo data-modal-blocked y (opcionalmente) se asocia el atributo data-modal-action a los botones de acción.

Diálogo de acción

Lanzar modal 
<a href="#modal-3" data-modal-trigger class="btn btn--primary">Lanzar modal</a>
<div data-modal data-modal-blocked id="modal-3" class="modal">
  <div role="dialog" aria-hidden="true" aria-labelledby="modal-title4" aria-describedby="modal-body4" data-modal-dialog class="modal__dialog">
      <div class="modal__content">
        <div class="modal__header">
          <h4 id="modal-title4" class="h4">Modal title</h4>
        </div>
        <div id="modal-body4" class="modal__body">
          <p>¿Estás seguro que deseas realizar esta acción?</p>
          <div class="xx-btn-example">
            <button data-modal-action aria-label="Aceptar" class="btn btn--primary">Aceptar</button>
            <button data-modal-action data-modal-close title="Cancelar" aria-label="Cancelar" class="btn btn--secondary">Cancelar</button>
          </div>
        </div>
      </div>
    </div>
  </div>

Enlace con el id de la ventana modal a mostrar y el atributo data-modal-trigger. Al div con la clase .modal se le agrega también el atributo data-modal para vincular el comportamiento JS. En cuanto al vídeo, hay que incluir dentro del .modal__body un contenedor con la clase .embedded-video y dentro el contenedor .embedded-video__iframe que contendrá el reproductor. Este último contenedor tendrá un id (cualquiera) que le identificará, y un atributo data-video-id con el código del vídeo de Youtube para cargarlo.

Normalmente los notificadores de eventos para elementos modal y reproductores de video se cargan con el evento DOMContentLoaded, pero si fuera necesario, también se pueden ejecutar las funciones ModalManager.getInstance().fw_addListeners() y PlayerManager.getInstance().loadInitFunction();​ que se encargarán de añadir los notificadores de evento de las modales y cargar los reproductores de video, respectivamente.

Lanzador de video modal

<div data-video>
  <a href="#modal-4" title="Reproducir video" aria-label="Reproducir video" role="button" data-modal-trigger data-video-play class="btn btn--primary">Reproducir video</a>
  <div data-modal id="modal-4" class="modal modal--video">
    <div role="dialog" aria-label="Reproductor de video" data-modal-dialog class="modal__dialog">
      <div class="modal__content">
        <div class="modal__body">
          <div class="embedded-video">
            <div role="document" id="ytplayer" data-video-id="qvHiV82-PuE" data-video-autoplay="1" class="embedded-video__iframe"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Enlace con el id de la ventana modal a mostrar y el atributo data-modal-trigger. Al div con la clase .modal se le agrega también el atributo data-modal para vincular el comportamiento JS. Para darle el estilo de error hay que añadir la clase modificadora .modal--error. El icono se puede modificar como se quiera y el contenido de .modal__header y .modal_body también.

Alerta en ventana modal

Lanzar alerta
Título de ejemplo
Descripción de ejemplo
  • Texto ejemplo 1
  • Texto ejemplo 2
  • Texto ejemplo 3
<a href="#modal-5" title="Lanzar alerta" role="button" data-modal-trigger class="btn btn--primary">Lanzar alerta</a>
<div data-modal data-modal-blocked id="modal-5" class="modal modal--error">
  <div role="alertdialog" data-modal-dialog aria-labelledby="modal-title-5" aria-describedby="modal-body5">
    <div class="modal__content">
      <div class="modal__body">
        <div class="alert-container">
          <div class="alert-container__header">
            <span aria-hidden="true" class="icon icon--alert color-error"></span>
            <strong id="modal-title-5">Título de ejemplo<br></strong>Descripción de ejemplo
          </div>
          <div class="alert-container__body"  id="modal-body5">
            <ul aria-expanded="true" class="list--compact">
              <li>Texto ejemplo 1</li>
              <li>Texto ejemplo 2</li>
              <li>Texto ejemplo 3</li>
            </ul>
            <button aria-label="Texto alternativo" data-modal-close class="btn btn--large btn--block bg-error inverse">Aceptar</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Subir