Ventanas emergentes

8 Dic

Una de las cosas que más se suelen utilizar en las aplicaciones web de hoy en día son las ventanas emergentes, o como muchos le dicen ‘ventana modal’ o ‘popup’.

Para los programadores con muy poca orientación, idea e interés al diseño, como yo, con un simple alert() basta, pero para el cliente esta ventana se ve muy mal, (“es re grasa boludo/a”) y prefieren algo más “bonito”. Aclaro también que en el siguiente ejemplo no me esforzaré para nada para darle un buen diseño, eso correrá por cuenta de ustedes al adaptarlo a su proyecto :)

Bueno, por empezar para hacer esto usaré Jquery. Más precisamente la versión 1.8:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>

Acto seguido agregaré al objeto jQuery un nuevo método creado por mí (en realidad no me acuerdo a quién se lo robé.. Robar es malo) que nos permitirá centrar la ventana en el medio de la pantalla:

jQuery.fn.doModal = function(){
    var w = $(window).width();
    var h = $(window).height();
    var divW = $(this).width();
    var divH = $(this).height();
    $(this).css({
       'position': 'absolute',
       'left': (w/2)-(divW / 2)+"px",
       'top': (h/2)-(divH / 2)+"px",
       'z-index': '999'
    });
    $(this).fadeIn(500);
 }

Este método nos permitirá centrar la ventana con un simple:

$(elemento).doModal();

Bien, veamos un ejemplo:

Ver ejemplo

<!DOCTYPE html>
<html>
 <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script type="text/javascript">
       jQuery.fn.doModal = function(){
          var w = $(window).width();
          var h = $(window).height();
          var divW = $(this).width();
          var divH = $(this).height();
          $(this).css({
             'position': 'absolute',
             'left': (w/2)-(divW / 2)+"px",
             'top': (h/2)-(divH / 2)+"px",
             'z-index': '999'
          });
          $(this).fadeIn(500);
       }
       $(document).ready(function(){
          $("#abrir").click(function(){
          $("#ventana_emergente").doModal();
       });
       $("#cerrar").click(function(){
          $("#ventana_emergente").css('display', 'none');
       });
    });
 </script>
 </head>
 <style type="text/css">
    #ventana_emergente {display: none; background-color: #fff; width: 300px; padding: 10px; border: solid 1px #000;}
 </style>
 <body>
    <div>
       <p> Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. </p>
       <p> Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. </p>
       <p> Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per. </p>
       <p> Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. </p> 
       <p> Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. </p>
       <p> Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei. Blandit incorrupte quaerendum in quo, nibh impedit id vis, vel no nullam semper audiam. </p>
       <p> Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. </p>
       <p> Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. </p>
       <p> Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per. </p>
       <p> Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. </p> 
       <p> Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. </p>
       <p> Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei. Blandit incorrupte quaerendum in quo, nibh impedit id vis, vel no nullam semper audiam. </p>
       <p> <a id="abrir" href="javascript:void(0);"> Abrir ventana </a> </p>
    </div>
    <div id="ventana_emergente"> 
       <p> Lorem ipsum es el texto que se usa habitualmente en dise&ntilde;o gr&aacute;fico en demostraciones de tipograf&iacute;as o de borradores de dise&ntilde;o para probar el dise&ntilde;o visual antes de insertar el texto final. </p>
       <p> Fuente: http://es.wikipedia.org/wiki/Lorem_ipsum </p>
       <p> <a id="cerrar" href="javascript:void(0);"> Cerrar </a> </p>
    </div>
 </body>
</html>

Primero tenemos un div con algunos parráfos que no importan mucho, sólo sirven de fondo, lo importante es el div con idventana_emergente“, que tienen algunos estilos con css. Independientemente del diseño que le pongas, este elemento debe tener un estilo displaynone” para que la ventana esté oculta al abrirse la página.

Luego al hacer click en un link mostramos la ventana visible y centrada:

$("#ventana_emergente").doModal();

Y finalmente haciendo click en otro link la cerramos:

$("#ventana_emergente").css('display', 'none');

También podríamos rehacer este ejemplo, pero en el momento que se visualice la ventana emergente aparezca por detrás una especia de capa que tape el fondo dejando más visible la ventana emergente. Deberíamos agregar un nuevo método:

jQuery.fn.doBloquer = function(){
    $(this).css({
       'position': 'fixed',
       'width': '100%',
       'height': '100%',
       'left': '0px',
       'top': '0px',
       'background-color': '#000',
       'opacity': 0.8,
       'z-index': '999'
    });
    $(this).fadeIn(500);
 }

Y agregar un div sin contenido que servirá de capa y que también tenga un un estilo displaynone“. El código entonces quedaría así:

Ver ejemplo

<!DOCTYPE html>
<html>
 <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script type="text/javascript">
       jQuery.fn.doBloquer = function(){
          $(this).css({
             'position': 'fixed',
             'width': '100%',
             'height': '100%',
             'left': '0px',
             'top': '0px',
             'background-color': '#000',
             'opacity': 0.8,
             'z-index': '999'
          });
          $(this).fadeIn(500);
       }
       jQuery.fn.doModal = function(){
          var w = $(window).width();
          var h = $(window).height();
          var divW = $(this).width();
          var divH = $(this).height();
          $(this).css({
             'position': 'absolute',
             'left': (w/2)-(divW / 2)+"px",
             'top': (h/2)-(divH / 2)+"px",
             'z-index': '999'
          });
          $(this).fadeIn(500);
       }
       $(document).ready(function(){
          $("#abrir").click(function(){
             $("#bloquer").doBloquer();
             $("#ventana_emergente").doModal();
          });
          $("#cerrar").click(function(){
             $("#bloquer").css('display', 'none');
             $("#ventana_emergente").css('display', 'none');
          });
       });
    </script>
 </head>
    <style type="text/css">
       #bloquer {display: none;}
       #ventana_emergente {display: none; background-color: #fff; width: 300px; padding: 10px; border: solid 1px #000;}
    </style>
 <body>
    <div>
       <p> Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. </p>
       <p> Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. </p>
       <p> Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per. </p>
       <p> Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. </p> 
       <p> Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. </p>
       <p> Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei. Blandit incorrupte quaerendum in quo, nibh impedit id vis, vel no nullam semper audiam. </p>
       <p> Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. </p>
       <p> Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. </p>
       <p> Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per. </p>
       <p> Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. </p> 
       <p> Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. </p>
       <p> Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei. Blandit incorrupte quaerendum in quo, nibh impedit id vis, vel no nullam semper audiam. </p>
       <p> <a id="abrir" href="javascript:void(0);"> Abrir ventana </a> </p>
    </div>
    <div id="bloquer"></div>
    <div id="ventana_emergente"> 
       <p> Lorem ipsum es el texto que se usa habitualmente en dise&ntilde;o gr&aacute;fico en demostraciones de tipograf&iacute;as o de borradores de dise&ntilde;o para probar el dise&ntilde;o visual antes de insertar el texto final. </p>
       <p> Fuente: http://es.wikipedia.org/wiki/Lorem_ipsum </p>
       <p> <a id="cerrar" href="javascript:void(0);"> Cerrar </a> </p>
    </div>
 </body>
</html>

 

Redes sociables

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *


    *