Skip to main content

Modal

Las ventanas modales son elementos que se superponen en la interfaz de usuario para mostrar información adicional o solicitar una acción específica sin necesidad de cambiar de página.
Se utilizan para captar la atención del usuario y se suelen emplear para mensajes de confirmación, formularios rápidos o contenido emergente.

Básico​

Básico
The modal box
Create a simple modal box using html and css only.
You don't need extra javascript functions to launch a basic modal box when you can do it only using the power of html and css.
Modal con botón de cancelación
Subscribe now
Enter your email to subscribe our newsletter
...or click CANCEL to close this modal box

Overlay deshabilitado​

Overlay deshabilitado

En este ejemplo el overlay está deshabilitado para cerrar el modal.

Simplemente cambia la etiqueta <label> por un <div> en el elemento .eolo-overlay

The modal box
Create a simple modal box using html and css only.
You don't need extra javascript functions to launch a basic modal box when you can do it only using the power of html and css.

Uso básico​

Este componente en un poco mas complejo en su estructura HTML ya que cuenta con varias etiquetas que deberás implementar para su correcto funcionamiento.

Acción
Primero cuentas con un elemento poveerá la interacción con el usuario para lanzar la ventana modal. Para dicho cometido se usará un <label> con la clase .eolo-btn para darle el estilo de un botón.

<label 
  className="eolo-btn bg-primary border-primary text-white dark:bg-primary dark:border-primary dark:text-white hover:bg-primary-700 hover:border-primary-700 hover:text-white dark:hover:bg-primary-700 dark:hover:border-primary-700 dark:hover:text-white" 
  html="modalWindow">
  Open modal
</label>

Toggler
Luego tienes un input[type=checkbox] que se encuentra oculto. Este, al cambiar su estado a checked será usado para mostrar la ventana modal usando CSS.

Si usas la clase .eolo-modal-toggler te olvidarás de agregar atributos extra para ocultarlo.

<input 
  type="checkbox" 
  id="modalWindow" 
  class="eolo-modal-toggler" />

Contenedor
Finalmente tienes un contenedor que ocupará toda la pantalla para que si clickeas en el, se vuelva a cerrar el modal, y dentro de este irá la caja "modal".

En este punto es importante que .eolo-modal-wrapper vaya exactamente después del input[type=chackbox].

<div class="eolo-modal-wrapper">

  <!--
    Si quieres cerrar el modal al hacer click en el overlay, usa 
    un <label> para .eolo-overlay.
    Si no necesitas esta funcionalidad puedes usar un <div> en 
    su lugar.
  -->
  <label class="eolo-overlay bg-black/70" for="modalWindow" />

  
  <div class="eolo-modal">
    <!--
      Dentro de .eolo-modal puede escribir todo el cuerpo de la 
      ventana modal.
    -->
  </div>

</div>