27 julio, 2019
Agrega un Modal a tu pagina web y olvídate de los modales por defecto que te da el navegador, puedes personalizarlos como tu quieras sin mucho código
Suscríbete a nuestro canal en Youtube
SuscríbirseA veces desaprovechamos la interactividad que nos puede usar un modal en una página web, pero los estilos que nos presenta por defecto un navegador a veces son demasiado básicos y no impactan en la estética de tu sitio web.
Por eso Bootstrap en sus últimas versiones nos permite crear modales personalizados, ahora ya no hay impedimento de no implementarlos y que tu creatividad decida donde puedes sacarle mayor provecho.
Primeramente veremos el código donde podremos personalizar el modal:
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Luego veremos cómo creamos el objeto para que lance el modal a través de una actividad en este caso un clic encima de un botón.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
Leido 6512 veces | 0 usuarios
Código fuente no disponible.
© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2024