Ventanas modales con BootStrap y WordPress

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.