PopUp (construcción dinámica)

Utilidad: A veces necesitamos mostrar un PoPup, generalmente al inicio o en alguna otra parte de la aplicación. Observa cómo se hace en JavaScript.


El siguiente código es el archivo index.html en el cual se mostrará el PoPup.

Observe que hace referencia a 3 archivos.

Nota: existe un 4° archivo (tipo imagen) que es llamado desde JavaScript:

El código del PoPup, será costruido dinámicamente en el elemento <body> a partir de la función inicio() ubicada en el archivo JavaScript del mismo nombre. Esta función es invocada desde el evento onload() del elemento <body>.

index.html

 <!DOCTYPE html>
 <html>
     <head>
         <title>JavaScript & JSON</title>
         <meta http-equiv=Content-Type content="text/html; charset=UTF-8">
         <script src="inicio.js"></script>
         <script src="popUp.js"></script>
         <link rel="stylesheet" type="text/css" href="popUp.css">
     </head>
     <body onload="inicio();">
         <h1>Ej.: Construir PopUp ...</h1>
         <button type="button" onClick="document.location.reload(true);">Recargar</button>
     </body>
 </html>


A continuación mostramos el contenido del archivo inicio.js y su función con el mismo nombre. Dentro invocamos a la función popPup() y le pasamos 3 parámetros.

  • Nombre de la imagen
  • Anchura de la imagen
  • Altura de la imagen

inicio.js

 function inicio()
 {
	
     popPup("popUp.png",  221, 204);

 }


El siguiente archivo contiene la función que construye dinámicamente el popUp:

popUp.js

 /** Construye dinámicamente un PopUp.
 * Construye dinámicamente un PopUp a partir de una imagen.
 * @param sSrcImg (string) Ruta y nombre de la imagen que se desea mostrar.
 * @param nObjWidth (numeric) Ancho de la imagen.
 * @param nObjHeight (numeric) Altura de la imagen.
 */
 function popPup( sSrcImg, nObjWidth, nObjHeight )
 {

     this.removeWindows = function ()
     { 

         objDivImg.style.display = "none";
         objDivBackground.style.display = "none";
         document.getElementById( "id_div_group" ).parentNode.removeChild( document.getElementById( "id_div_group" ) ); 

     }

     var objDivGroup = document.createElement( "div" );
     objDivGroup.id = "id_div_group";

     var objDivBackground = document.createElement( "div" );
     objDivBackground.id = "id_div_background";
     objDivBackground.setAttribute( "class", "fondo_opaco_information" );
     objDivBackground.setAttribute( "style", "display: none;" );
     objDivGroup.appendChild( objDivBackground );

     var objImg = document.createElement( "img" );
     objImg.setAttribute( "src", sSrcImg );
     objImg.setAttribute( "onclick", "removeWindows();" );

     nObjWidth  = objImg.width  === 0 ? nObjWidth  : objImg.width ;
     nObjHeight = objImg.height === 0 ? nObjHeight : objImg.height;

     var wW = window.innerWidth  || document.documentElement.clientWidth  || document.body.clientWidth;
     var hH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
     var w = ( wW - nObjWidth )  / 32;
     var h = ( hH - nObjHeight ) / 12;

     var objDivImg = document.createElement( "div" );
     objDivImg.id = "id_div_img";
     objDivImg.setAttribute( "class", "ventana_modal_information" );
     objDivImg.setAttribute( "style", "display: none; left:" + w + "%;top:" + h + "%;" );
     objDivImg.appendChild( objImg );
     objDivGroup.appendChild( objDivImg );

     document.getElementsByTagName( "body" )[0].appendChild( objDivGroup );
     objDivImg.style.display = "";
     objDivBackground.style.display = "";

 }


Y con el siguiente código le agregamos el estilo:

popUp.css

 .ventana_modal_information 
 {
     display: ;
     position: fixed;
     width: auto;
     height: auto;
     padding: 0em 0em;
     margin-right: 0;
     z-index: 2001;
     cursor: pointer;
 }

 .fondo_opaco_information
 {
     display: ;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #000;
     z-index: 2000;
     opacity: .70;
     -moz-opacity: 0.70;
     filter: alpha( opacity = 50 );
 }


He aquí el ejemplo:


Tool developed at revolution, under free software. Copyleft 2017.