Accesos
Ventanas modales con BootStrap

En ocasiones, es necesario mostrar una ventana modal para ampliar información sobre algo que queremos destacar. Por ejemplo un video, un mapa de Google Maps o algunos textos específicos.

Como mostrar con Bootstrap una ventana modal

Utilizando el framework Bootstrap que lleva integrado nuestras plantillas optimizadas para el SEO, en este tutorial vamos a insertar en nuestra web varios ejemplos de ventanas modales según las necesidades de información hacia nuestros usuarios.

En una nueva página o entrada o editando alguna existente, ponemos el editor de WordPress en Texto e insertamos las líneas del primer ejemplo. Puedes copiar y pegar para ir más rápido.

El primer grupo de líneas corresponden con el botón de apertura de la ventana Modal <button>...</button> que será visible para poder cliquear encima cuando publiquemos o actualicemos la página o entrada. Y el segundo grupo, corresponde con la propia ventana Modal que gracias a la clase class="modal fade" permanece oculto hasta que pulsemos el botón.

Ambos grupos están conectados con una función de texto y css para que no hayan errores de agrupación y estén perfectamente unidos. Para el grupo <button> en link ancla es data-target=”#myModal” y para la ventana que recibe la orden de apertura es id=”myModal”. Si ambos no coinciden, simplemente no abrirá la ventana deseada.

<!-- Botón de apertura -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">
  Abrir ventana con texto
</button>
 
<!-- Ventana Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Mi ventana Modal</h4>
      </div>
      <div class="modal-body">
        <p>Aquí puedes poner un <strong>video de YouTube</strong>, un mapa de <strong>Google Maps</strong> o cualquier texto necesario como por ejemplo, textos legales o informativos sobre productos y/o servicios con sus respectivas imagenes.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

 

El funcionamiento de la ventana modal es simple. Si nos fijamos, la ventana cuenta con tres clases en css que emulan a un documento HTML: class=”modal-title” que encierra el título de la ventana cuando ésta abre, class=”modal-body” que es donde insertamos el contenido que vamos a mostrar y class=”modal-footer” que por regla general, es donde se insertan datos de pie de página. En este caso, el botón de Cerrar.

Ventana Modal con Video

Siguiendo los pasos anteriores, ahora vamos a crear una ventana para mostrar un video de YouTube. Simplemente vuelve a copiar y pegar el ejemplo de arriba a continuación del primero y cambia el data-target=”#myModal” del botón por data-target=”#myModalVideo” y, a continuación el id=”myModal” por id=”myModalVideo” de la nueva ventana. También puedes copiar y pegar el ejemplo siguiente con el video por defecto que hemos insertado.

No olvides insertar los contenidos encerrados entre las clases modal-title y modal-body por los tuyos propios. En modal-title, concretamente en la línea 12 donde está el encabezado <h4>...</h4>.

<!-- Botón de apertura -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModalVideo">
  Abrir ventana con Video
</button>

<!-- Ventana Modal Video -->
<div class="modal fade" id="myModalVideo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Mostrando un Video</h4>
      </div>
      <div class="modal-body">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/mKt-MDwtVB4" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

Ventana Modal con Mapa

Para el siguiente ejemplo, procedemos de igual forma que el anterior y solo cambiamos nuevamente data-target=”#myModal” del botón por data-target=”#myModalMap” para la apertura individual de esta ventana y los correspondientes contenidos dentro de title, body y/o footer si fuere necesario.

<!-- Botón de apertura -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModalMap">
  Abrir ventana con Mapa
</button>

<!-- Ventana Modal Mapa -->
<div class="modal fade" id="myModalMap" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Mostrando un Mapa</h4>
      </div>
      <div class="modal-body">
        <iframe width="100%" height="300" style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d12505.42456121471!2d-0.53524485!3d38.41013375!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2ses!4v1423645966802" frameborder="0"></iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>


¡SIGAMOS EN CONTACTO!

¡Nos encantaría tenerte al día con nuestras últimas noticias y ofertas! 😎

¡No enviamos spam! Lee nuestra política de privacidad para más información.

Publicaciones relacionadas

Renting Web, la revolución web ha llegado

Renting Web, la revolución web ha llegado

Renting Web es un servicio organizado pensando en pequeñas y medianas empresas, consiste en el diseño y mantenimiento de páginas web abonadas en cómodas cuotas. La idea es abonar mensualmente una cuota similar a la que pagaría por disponer de servidor, este pago incluye lo que conocemos como todo incluido. Esto se refiere a los […]

Enlace permanente de WordPress

Enlace permanente de WordPress

El enlace permanente de WordPress tiene influencia en el ranking de tráfico y motores de búsqueda de tu sitio web, aunque no sea muy evidente. No es recomendable pasar desapercibidos estos enlaces. Elegirlos erróneamente puede ser perjudicial y es difícil de cambiar, a futuro se puede perder la conexión a su sitio. El enlace permanente […]

¿Qué es Google Authenticator?

¿Qué es Google Authenticator?

Si deseas mantener un buen nivel de seguridad en WordPress, debes considerar utilizar el plugin de la autenticación de dos pasos para cuentas Google y otros servicios. Existe una manera sencilla de habilitar la autenticación de 2 pasos en WordPress utilizando Google Authenticator, con esto darás valor a tu blog y seguridad. Google Authenticator funciona […]

¿Qué es el multisite de WordPress?

¿Qué es el multisite de WordPress?

El multisite de WordPress es un CMS (es decir, no hay que instalar nada especial, sólo activarla) que permite gestionar una red de webs desde una sola instalación de WordPress que, aunque nació como solución para blogs, actualmente cuenta con funcionalidades y capacidades que le hacen capaz de adaptarse a multitud de necesidades. Una de […]


17 Comentarios
  1. Hola, he copiado el codigo abrir ventana con video y no me sale el mismo ejemplo que a usted, sabria usted el porque? un cordial saludo.

    1. Hola Sebastian, tienes que asegurarte que de estás utilizando una de nuestras plantillas para wordpress de estos tutoriales ya que utilizan BootStrap en su versión 3.0, o en su defecto cualquier otra plantilla con la misma versión del framework. También es importante saber que si utilizas muchos plugins, puede estar tu web afectada por exceso de JavaScript y dar lugar a errores en el código fuente. No obstante, siendo una suposición esto último, ¿podrías especificar una url o captura de pantalla para ver dónde está el problema? Saludos

  2. hola, he puesto un mapa utilizando la api de google maps y resulta que luego de presentar una vez la ventana, la siguente vez el mapa me sale solo en la esquina del body de la ventana modal, alguna sugerencia?

    1. Hola roger, en el ejemplo solo se ha utilizado el iframe que proporciona Google Maps desde Compartir o insertar mapa de los ajustes. Si utilizas alguna api en concreto, habría que ver en qué modo está afectando o si se trata de la cookies de tu ordenador. Prueba a vaciar las cookies primero y si sigue dándote el error lo reportas aquí nuevamente para ver que puede ser. Sería bueno saberlo por si le ocurre a más usuarios.

  3. Hola he visto en el ejemplo que el video no deja de reproducirse aunque cierre la ventana modal, se puede correjir esto gracias

    1. Hola Jose, seguramente si se puede corregir con algún plugin de jQuery para bootstrap. Googleando se podría encontrar. En mi caso, para los proyectos web que realizo para mis clientes, utilizo un plugin diferente para los videos e imágenes junto con bootstrap que, al cerrar la ventana, deja de reproducir el video en cuestión. Si te interesa puedes visitar su web: http://highslide.com

  4. Hola estoy intentando realizar una acción después de cerrar ka ventana modal, coloque un botón y su método pero no accede a este, hay alguna manera de cachar el cierre de la ventana modal para después realizar algún evento como mostrar un botón nuevo (hacerlo visible)? Gracias

  5. Hola, sabrás como vincular la ventana modal con el menú principal? es decir quiero que mi link de contacto abra en la modal al darle click en el botón del menú principal, ya tengo mis contactos en la modal pero no se como vincularlo gracias de antemano, saludos

    1. Hola Leonardo, ¿te refieres a abrir la ventana modal? o ¿a mostrar datos dinámicos en el modal por variable desde el link contacto?.

      Si es la primera pregunta, prueba a insertar la clase data-target=”#myModal” del tutorial, en el campo Atributos del título del botón Contacto de tu menú principal. No sé si va a funcionar, pero pruébalo a ver qué pasa y reporta los resultados. Igual hay que modificar algo de código dentro del archivo functions.php para que funcione.

      Y si es la segunda pregunta, ¿te refieres a algo como esto?: http://pharma.ibermega.com/ Cuando abras el link, pulsa en el botón flotante de color naranja que hay a la izquierda cerca del pie de página. Ahí se abre una modal con datos dinámicos.

      Un saludo

  6. Hola. amigo tengo un problema he seguido su ejemplo al pie de la letra pero cuando el llamado a la venta modal también se pone modal sobre ella y no se como arreglar ese problema

  7. hola, estoy utilizando wordpress y necesito hacer un modal que se accione por medio del boton, tu ejemplo esta claro y pensè que copiando el codigo y poniendolo en mi editor funcionaria, pero no es asi; podrias por favor indicarme que deberia cambiar?

  8. Hola, encontré este tutorial y, si bien es bastante antiguo, me sirvió perfectamente. Incluso pude colocar como botón una imagen. Mi pregunta es ¿Como se puede hacer para tener varias ventanas modales en la misma pagina? ¿Que parte del código es la que debo modificar? Gracias de antemano. Saludos

Deja un comentario

  Acepto losPolítica de privacidad

Muy importante.- No es necesario registrarse para publicar una opinión o comentario, pero si es necesario introducir su nombre y correo electrónico para evitar el SPAM. Además, no utilizaremos los datos insertados para otras cuestiones que difieren de esta publicación. En cualquier momento puede solicitar la eliminación de los mismos, enviando una solicitud al correo de contacto y con el mismo correo que ha emitido la opinión o comentario para que en un plazo máximo de 72 horas se elimina.

INFORMACIÓN ADICIONAL SOBRE PROTECCIÓN DE DATOS:

  • Responsable: IBERMEGA TSEO, SL
  • Finalidad del tratamiento: Control de spam, gestión de comentarios, comunicaciones y promociones.
  • Legitimación: Su consentimiento
  • Transferencia de datos: Tus datos no se cederán a terceros, salvo por obligación legal.
  • Derechos: Acceso, rectificación, portabilidad, olvido.
  • Email de contacto: oficina@ibermega.com

Copyright © 2002-2024 by IBERMEGA TSEO, S.L.