Crea un modal personalizado con Bootstrap

Implementar un Modal con Bootstrap rápidamente

CSS
Crea un modal personalizado con Bootstrap

Implementar un Modal con Bootstrap rápidamente

DESCARGAR

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

A 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">&times;</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>

 


¿Quieres descargar el código fuente Crea un modal personalizado con Bootstrap?
...por favor suscríbete gratuitamente para descargarlo

DESCARGAR

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter
ó copia el link

Visitado 671 veces | Publicado hace 8 meses

Más códigos de programación en BOOTSTRAP.

Ver scripts de BOOTSTRAP

© Todos los derechos reservados CODEA APLICACIONES | Comunidad de programación web y desarrollo de aplicaciones móviles | 2020