DIANA

Diseño Aplicaciones Navarra

Modal

Ventana gn-modal para mostrar contenido o acciones sobre una capa superpuesta.

Estado: review

1. Modal interactiva (abrir / cerrar / reabrir)

Mostrar HTML 
<section class="docs-modal-example" data-modal-example>
<div>
    <button type="button" class="gn-button gn-button--primary gn-button--md" data-modal-open aria-haspopup="dialog" aria-controls="gn-modal-example-1">Abrir gn-modal</button>
  </div>

  <div class="docs-modal-stage">
    <div id="gn-modal-example-1" class="gn-modal gn-modal--open" data-gn-modal data-gn-modal-lock-scroll="false" data-gn-modal-isolate="false" aria-hidden="false">
      <div class="gn-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="gn-modal-title-example-1" aria-describedby="gn-modal-desc-example-1">
        <div class="gn-modal__header">
          <h3 class="gn-modal__title" id="gn-modal-title-example-1">Modal heading</h3>
          <button type="button" class="gn-modal__close" aria-label="Cerrar gn-modal" data-modal-close>
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
            </svg>
          </button>
        </div>
        <div class="gn-modal__body" id="gn-modal-desc-example-1">
          <p>Contenido de ejemplo para documentar el patrón gn-modal y su ciclo de interacción en docs.</p>
        </div>
        <div class="gn-modal__footer">
          <button type="button" class="gn-button gn-button--primary gn-button--md">Acción principal</button>
          <button type="button" class="gn-button gn-button--secondary gn-button--md" data-modal-close>Cancelar</button>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="docs-modal-example">
Mostrar JS 
document.addEventListener('DOMContentLoaded', () => {
  window.GNDS.initModals();
});

2. Modal expandida (estructura)

Mostrar HTML 
<div class="docs-modal-stage">
    <div class="gn-modal gn-modal--open gn-modal--expanded" aria-hidden="false">
      <div class="gn-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="gn-modal-title-example-2" aria-describedby="gn-modal-desc-example-2">
        <div class="gn-modal__header">
          <h3 class="gn-modal__title" id="gn-modal-title-example-2">Modal de tamaño expandido</h3>
          <button type="button" class="gn-modal__close" aria-label="Cerrar gn-modal">
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
            </svg>
          </button>
        </div>
        <div class="gn-modal__body" id="gn-modal-desc-example-2">
          <p>Ejemplo visual de la variante <code>\.gn-modal--expanded</code> para contenidos más extensos.</p>
        </div>
      </div>
    </div>
  </div>
</section>