Inicio » Blog » Bootstrap

27 julio, 2019

Crea un modal personalizado con Bootstrap

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

Crea un modal personalizado con Bootstrap

Suscríbete a nuestro canal en Youtube

Suscríbirse

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>

 


Leido 6144 veces

Compartir link del tutorial con tus amigos


Aprende más sobre Bootstrap

Cursos de programación

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023