Ventana modal bootstrapEn 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.

Utilizando el framework Bootstrap que lleva integrado las plantillas web Athenea y Pharmacy, 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.

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>.

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.


Webmaster y CEO en IBERMEGA digital desde el año 2002. Desarrollador de aplicaciones web. Consultor y docente en SEO, SEM e Internet. Project Management. I+D en App Web para nuevos proyectos. Tecnologías web en streaming para Radio y TV. Investigaciones de Mercado para proyectos de comercio electrónico. Autor de diversos artículos y tutoriales sobre el sector.

También te puede interesar

Un pensamiento en y Ventanas modales con BootStrap y WordPress & rdquo;

  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.

    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

  3. 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

  4. 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

  5. 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

  6. 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?

Inserta un comentario

El correo no se mostrará ;)