Block Modal
Popup dialog windows.
{# derafu_twig:templates/pages/components/block-modal.html.twig #}
{% extends 'layouts/default.html.twig' %}
{% block content %}
{# Modal simple #}
<button type="button" class="btn btn-light d-block mb-2" data-bs-toggle="modal" data-bs-target="#modal-1">
Abrir Modal Simple
</button>
<twig:block-modal
id="modal-1"
title="Título del Modal"
content="<p>Este es un modal básico con título y botón de cerrar.</p>"
:buttons="[
{
text: 'Cerrar',
type: 'secondary',
dismiss: true
},
{
text: 'Guardar Cambios',
type: 'primary'
}
]"
/>
{# Modal más complejo #}
<button type="button" class="btn btn-light d-block mb-2" data-bs-toggle="modal" data-bs-target="#modal-2">
Abrir Modal Complejo
</button>
<twig:block-modal
id="modal-2"
title="Confirmación Requerida"
content="<p>Esta acción no se puede deshacer. ¿Estás seguro de que deseas continuar?</p>"
size="lg"
centered="true"
staticBackdrop="true"
:buttons="[
{
text: 'Cancelar',
type: 'light',
dismiss: true
},
{
text: 'Sí, continuar',
type: 'danger',
attributes: 'onclick=\'handleConfirmation()\''
}
]"
/>
{# Modal fullscreen con contenido scrollable #}
<button type="button" class="btn btn-light d-block mb-2" data-bs-toggle="modal" data-bs-target="#modal-3">
Abrir Modal fullscreen con contenido scrollable
</button>
<twig:block-modal
id="modal-3"
title="Términos y Condiciones"
content="<div style='height: 1000px'>Contenido muy largo...</div>"
size="fullscreen"
scrollable="true"
:buttons="[
{
text: 'Aceptar',
type: 'success'
}
]"
/>
{# Modal básico #}
<button type="button" class="btn btn-light d-block mb-2" data-bs-toggle="modal" data-bs-target="#modal-basic">
Abrir Modal Básico
</button>
<twig:block-modal
id="modal-basic"
title="Modal Básico"
content="<p>Este es un modal simple con título y botón de cerrar.</p>"
:buttons="[
{
text: 'Cerrar',
type: 'secondary',
dismiss: true
}
]"
/>
{# Modal sin botón de cerrar #}
<button type="button" class="btn btn-light d-block mb-2" data-bs-toggle="modal" data-bs-target="#modal-no-close">
Modal sin X
</button>
<twig:block-modal
id="modal-no-close"
title="No puedes cerrarme fácilmente"
content="<p>Este modal no tiene el botón X para cerrar.</p>"
:showClose="false"
:buttons="[
{
text: 'Entendido',
type: 'warning',
dismiss: true
}
]"
/>
{# Modal Static Backdrop #}
<button type="button" class="btn btn-light d-block mb-2" data-bs-toggle="modal" data-bs-target="#modal-static">
Modal que no se Cierra
</button>
<twig:block-modal
id="modal-static"
title="Debes tomar una decisión"
content="<p>Este modal no se cerrará al hacer clic fuera de él. Debes usar uno de los botones.</p>"
staticBackdrop="true"
:buttons="[
{
text: 'Cancelar',
type: 'light',
dismiss: true
},
{
text: 'Aceptar',
type: 'danger',
dismiss: true
}
]"
/>
{# Modal Centrado con Tamaño Small #}
<button type="button" class="btn btn-light d-block mb-2" data-bs-toggle="modal" data-bs-target="#modal-sm-centered">
Modal SM Centrado
</button>
<twig:block-modal
id="modal-sm-centered"
title="Pequeño y Centrado"
content="<p>Un modal pequeño y centrado verticalmente.</p>"
size="sm"
centered="true"
:buttons="[
{
text: 'OK',
type: 'info',
dismiss: true
}
]"
/>
{# Modal Grande con Scroll #}
<button type="button" class="btn btn-light d-block mb-2" data-bs-toggle="modal" data-bs-target="#modal-lg-scroll">
Modal Grande con Scroll
</button>
<twig:block-modal
id="modal-lg-scroll"
title="Términos y Condiciones"
content="<div>
<h4>1. Introducción</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<h4>2. Uso del Servicio</h4>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
<h4>3. Privacidad</h4>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco...</p>
<h4>4. Términos Legales</h4>
<p>Duis aute irure dolor in reprehenderit in voluptate velit...</p>
<h4>5. Modificaciones</h4>
<p>Excepteur sint occaecat cupidatat non proident...</p>
<!-- Repetir contenido para demostrar scroll -->
</div>"
size="lg"
scrollable="true"
:buttons="[
{
text: 'Rechazar',
type: 'light',
dismiss: true
},
{
text: 'Aceptar Términos',
type: 'success',
dismiss: true
}
]"
/>
{# Modal Extra Large con Formulario #}
<button type="button" class="btn btn-light d-block mb-2" data-bs-toggle="modal" data-bs-target="#modal-xl-form">
Formulario en Modal XL
</button>
<twig:block-modal
id="modal-xl-form"
title="Registro de Usuario"
content="<form id='userForm'>
<div class='row'>
<div class='col-md-6 mb-3'>
<label for='firstName' class='form-label'>Nombre</label>
<input type='text' class='form-control' id='firstName' required>
</div>
<div class='col-md-6 mb-3'>
<label for='lastName' class='form-label'>Apellido</label>
<input type='text' class='form-control' id='lastName' required>
</div>
</div>
<div class='mb-3'>
<label for='email' class='form-label'>Email</label>
<input type='email' class='form-control' id='email' required>
</div>
<div class='mb-3'>
<label for='password' class='form-label'>Contraseña</label>
<input type='password' class='form-control' id='password' required>
</div>
</form>"
size="xl"
centered="true"
:buttons="[
{
text: 'Cancelar',
type: 'secondary',
dismiss: true
},
{
text: 'Registrar',
type: 'dark',
attributes: 'onclick="document.getElementById(\'userForm\').submit()"'
}
]"
/>
{# Modal Fullscreen #}
<button type="button" class="btn btn-light d-block mb-2" data-bs-toggle="modal" data-bs-target="#modal-fullscreen">
Ver en Pantalla Completa
</button>
<twig:block-modal
id="modal-fullscreen"
title="Modo Pantalla Completa"
content="<div class='text-center'>
<h1 class='display-1'>👋</h1>
<p class='lead'>Este modal ocupa toda la pantalla</p>
<hr>
<p>Perfecto para contenido inmersivo o cuando necesitas mostrar mucha información.</p>
</div>"
size="fullscreen"
:buttons="[
{
text: 'Salir',
type: 'outline-primary',
dismiss: true
}
]"
/>
{# Modal sin Footer #}
<button type="button" class="btn btn-light d-block mb-2" data-bs-toggle="modal" data-bs-target="#modal-no-footer">
Modal sin Footer
</button>
<twig:block-modal
id="modal-no-footer"
title="Solo Contenido"
content="<p>Este modal no tiene botones en el footer, solo el botón de cerrar en el header.</p>"
/>
{% endblock %}
