Crea un modal personalizado con Bootstrap

Implementar un Modal con Bootstrap rápidamente

Crea un modal personalizado con Bootstrap

Implementar un Modal con Bootstrap rápidamente

CSS

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>

 

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

Whatsapp Messenger Facebook Twitter

Visitado 1566 veces | Publicado hace 1 año

CURSO FLUTTER DESARROLLO DE UNA APP RESTAURANT CON CARRITO DE COMPRA

Mira el temario del curso en el siguiente link
App Restaurant Flutter con Carrito de Compra

Logo Codea App

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020