Ventana modal que puede emplearse en galerías, visualización de contenidos o diálogos.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<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
).
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<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.
<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.
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.<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.
<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>