En determinadas ocasiones nos vemos en la necesidad de mostar un elemento en el navegador, pero sin salirnos de la pagina principal que estabamos visitando (ejemplo: ampliar foto de una tienda online) y con la posibilidad de poder retornar a la pagina principal.
Esto en desarrollo web se llama ventana modal.
Una definición mas precisa seria la siguiente:
Una ventana modal es un elemento de control gráfico subordinado a la ventana principal de una aplicación.
Crea un modo que deshabilita la ventana principal, pero la mantiene visible, con la ventana modal como una ventana secundaria delante de ella.
Los usuarios deben interactuar con la ventana modal antes de que puedan regresar a la aplicación principal.
Para realizar esta tarea vamos a utlizar dos librerias https://jquery.com/ y https://www.ericmmartin.com/projects/simplemodal/
Jquery es una biblioteca de javascript que nos permite facilitar el trabajo y jquerySimpleModal es la libreria que nos permite crear la ventana modal.
Para realizar el ejemplo voy a aprovechar el codigo creado en el post leer-un-json-desde-php y utilizare una json con la lista de playas disponibles en Gijón.
Lo primero que vamos a hacer es incluir una clase css con la que poder indicar a traves de jquery los enlaces que se deben abrir en el modo modal.
Para el ejemplo voy a usar un clase «link»
<a class="link" href="playa.php?id=0">Playa de Serín</a>
El siguiente paso es crear el fichero javascript donde vamos a crear la ventana modal para todos los estilos «link» y lo llamaremos basic.js
El funcionamiento es muy simple, en el metodo on pasamos por paremetros el «click«, el estilo creado «a.link» y en la funcion modal incluimos el codigo html para creaar el iframe
//funcion para crear iframe modal
$(document).on('click', 'a.link', function(e) {
$.modal('<iframe src="' + $(this).attr('href') + '" height="550" width="980">', {
closeHTML: "<a href='#' style='position:absolute; right:10px; top:10px;'><img src='images/x.png'></a>",
overlayClose: true
});
return false;
});
El ultimo paso es añadir en el documento html las librerias jquery y el fichero que hemos creado basic.js
<!-- Load jQuery, SimpleModal and Basic JS files --> <script type='text/javascript' src='js/jquery.js'></script> <script type='text/javascript' src='js/jquery.simplemodal.js'></script> <script type='text/javascript' src='js/basic.js'></script>
el resultado seria el siguiente:
Ejemplo en funcionamiento: http://programacionconphp.com/dev/iframeMODAL/
Codigo fuente: https://github.com/victorgarciasisi/iframeMODAL