Lightbox

Un lightbox es una ventana superpuesta que aparece bloqueando parte del contenido en una página. Cuando aparece esta modal, el fondo está atenuado y desactivado por un overlay, lo que indica a los usuarios que no pueden interactuar con otro contenido de la página hasta cerrar la modal.

Variaciones y tipos

Dentro de los modales diferenciamos: Text + Button y Text + Button + Link.

Demo en vivo

<button type="button" class="rds-btn rds-btn--primary" data-rds-lightbox-target="#lightbox-button">Show modal</button>
<div data-rds-lightbox id="lightbox-button" class="rds-lightbox" role="dialog" aria-modal="true" aria-labelledby="modal-label" aria-describedby="modal-description" tabindex="-1">
  <div class="rds-lightbox__container rds-lightbox__container--s">
    <div class="rds-lightbox__header rds-mb-l02">
      <p class="rds-lightbox__title rds-subheadline">Title modal heading</p>
      <button type="button" class="rds-lightbox__close" data-rds-lightbox-close aria-label="close modal">
        <span class="rds-btn__icon rds-icon-Close" aria-label="close modal"></span>
      </button>
    </div>
    <!-- Note: Lightboxes with content that scrolls, at any viewport, requires `tabindex="0"` on the `rds-lightbox__content` element -->
    <div class="rds-lightbox__content rds-lightbox__content--scroll rds-mb-l03" tabindex="0">
      <p class="rds-mb-l01">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget lectus bibendum, rutrum risus non, fermentum nibh. Curabitur efficitur est nec dui auctor blandit a in magna. Nam non diam rutrum, ultrices est eu, dignissim magna. Phasellus orci tortor, venenatis sed velit sit amet, posuere aliquet eros. Nulla facilisi. </p>
      <p>Integer tempor iaculis est, quis lacinia ipsum tincidunt eget. Sed quis velit quis erat efficitur dapibus. Proin vitae justo quis tellus sagittis cursus. Duis tempus eu nibh eu pretium.</p>
    </div>
    <div class="rds-lightbox__footer">
      <button type="button" class="rds-btn rds-btn--primary rds-mb-l02" data-rds-lightbox-close>Cancelar</button><button type="button" class="rds-btn rds-btn--secondary" data-rds-lightbox-primary-focus>Aceptar</button>
    </div>
  </div>
</div>
<button type="button" class="rds-btn rds-btn--primary" data-rds-lightbox-target="#lightbox-link">Show modal</button>
<div data-rds-lightbox id="lightbox-link" class="rds-lightbox" role="dialog" aria-modal="true" aria-labelledby="modal-label" aria-describedby="modal-description" tabindex="-1">
  <div class="rds-lightbox__container rds-lightbox__container--s">
    <div class="rds-lightbox__header rds-mb-l02">
      <p class="rds-lightbox__title rds-subheadline">Title modal heading</p>
      <button type="button" class="rds-lightbox__close" data-rds-lightbox-close aria-label="close modal">
        <span class="rds-btn__icon rds-icon-Close" aria-label="close modal"></span>
      </button>
    </div>
    <!-- Note: Lightboxes with content that scrolls, at any viewport, requires `tabindex="0"` on the `rds-lightbox__content` element -->
    <div class="rds-lightbox__content rds-lightbox__content--scroll rds-mb-l03" tabindex="0">
      <p class="rds-mb-l01">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget lectus bibendum, rutrum risus non, fermentum nibh. Curabitur efficitur est nec dui auctor blandit a in magna. Nam non diam rutrum, ultrices est eu, dignissim magna. Phasellus orci tortor, venenatis sed velit sit amet, posuere aliquet eros. Nulla facilisi. </p>
      <p>Integer tempor iaculis est, quis lacinia ipsum tincidunt eget. Sed quis velit quis erat efficitur dapibus. Proin vitae justo quis tellus sagittis cursus. Duis tempus eu nibh eu pretium.</p>
    </div>
    <div class="rds-lightbox__footer">
      <button type="button" class="rds-btn rds-btn--primary rds-mb-l02" data-rds-lightbox-close>Cancelar</button><a href="#" class="rds-link rds-lightbox__link">Link</a>
    </div>
  </div>
</div>

Comportamiento

Se posicionará centrado horizontal y verticalmente en la pantalla.

El usuario puede cerrar el lightbox clicando sobre:

  • Close icon.
  • Cancel icon.
  • Overlay.