Ventanas modales con Bootstrap y WordPress

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>

Abrir ventana con texto

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>

Abrir ventana con Video

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>

Abrir ventana con Mapa