Cómo Poner una Caja Modal Pop-Up con HTML - CSS y JS - Plugin

En esta entrada quiero mostrarles como colocar la función Modal POPUP usando Hoja de estilo y JavaScript. Esto va cuando el usuario haga clic en un link se abra una ventana flotante que muestra más detalles de la descripción.

Esto va muy bien si queremos ahorrar espacio en nuestra entrada para minimizar el contenido, pero, dejando una buena estructura. Realmente tiene buena finalidad para mostrar detalles que contenga imágenes con texto o cuadros comparativos e incluso mostrar información mas especifica de un producto o servicio.

Veamos que necesitamos para agregar nuestro Modal POP-UP usando HTML. Sigue las instrucciones para colocar esta función de forma muy práctica.

Agrega CSS en tu Blog

Lo primero que debemos agregar es nuestra hoja de cascada de estilo para darle forma a la caja Modal Popup. Copia el siguiente código css y pégalo antes del tag </head>

<link href='https://dl.dropboxusercontent.com/s/az701f2f3qyk3c1/modal-css-popup.css' rel='stylesheet'/>

Agrega la Función JS

Lo segundo que debemos es agregar nuestro JavaScript para llamar la caja modal pop-up. Para ello copiamos el código JS y lo pegamos antes del tag </body>

<script src="https://dl.dropboxusercontent.com/s/oyza303bqgpoivh/modal-js.js"></script>

Coloca el DIV en HTML para Llamar el Modal POPUP

Ahora debemos llamar la función modal popup en la sección donde hagan clic se abra la ventana emergente. Copia el siguiente código dentro del párrafo o link HTML que quieres que al hacer clic habrá la caja modal. Ejemplo: <p onclick="document.getElementById('ejemplo').style.display='block'">Este es un ejemplo Modal popup</p>

otro ejemplo:

<a href="ejemplo1" onclick="document.getElementById('ejemplo1').style.display='block'">Segundo Ejemplo para abrir Modal</a>

Copia el siguiente código:

onclick="document.getElementById('ejemplo').style.display='block'"

Código Modal PopUP, puedes copiarlo al final de tu entrada o al inicio.

<!-- The Modal -->
<div id="ejemplo1" class="modal">

  <!-- Modal content Lorem ipsum dolor -->
  <div class="modal-content">
    <div class="modal-header">
      <span onclick="document.getElementById('ejemplo1').style.display='none'" class="close">&times;</span>
      <h3>Lorem ipsum dolor</h3>
    </div>
    <div class="modal-body">
      <h4>Lorem ipsum dolor:</h4>
      <p>
        <ul>
          <li>simply dummy text of the printing and typesetting industry.</li>
          <li>simply dummy text of the printing and typesetting industry.</li>
          <li>simply dummy text of the printing and typesetting industry.</li>
          <li>simply dummy text of the printing and typesetting industry.</li>
          <li>simply dummy text of the printing and typesetting industry.</li>
        </ul>
        <br> 
        <h4>Lorem ipsum dolor:</h4>
        <ul>
          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
        </ul>
      </p>  
    </div>
    <div class="modal-footer">
      <h5>Lorem ipsum dolor</h5>
    </div>
  </div>
</div>

Modal POP UP: Tutorial Completo para Abrir una Ventana Emergente 

Descargar Código Modal Popup

Si quieres instalar el código en tu propio repositorio, entonces, puedes descargarlo en el siguiente enlace:

https://dl.dropboxusercontent.com/s/4oiflqgtr3svhi0/modal-popup.rar