Ventana emergente de…cualquier cosa!

Si, acabo de terminar de escribir un articulo acerca de como conseguir presentar una ventana emergente desde un controlador de Yii, y puede que sea ingenioso, pero….sigue siendo retorcido, así que pensando un poco mas, os propongo esta ventana con… ‘¿retrollamada?

Esta vez la idea es levantar una ventana emergente, y que sea ella la que llame lo que sea; daros cuenta la flexibilidad que representa el poder cargar en la emergente cualquier cosa; desde paginas de nuestra web, a paginas de otras…. Cualquier cosa que puedas cargar en un IFRAME…

Para hacerlo, vamos a volver a utilizar la rutina fancybox, pero cambiaremos nuestro enfoque. Vamos a escribir una función en un modulo independiente, como os proponíamos antes, puede ser nuestra paginas de funciones.

El código, es el siguiente:

function salidaEmergente($direccion,$tiempoCierre=0){
    $salida="";
    $salida.="";
 
    $rutina="
       \$(document).ready(function() {
          \$('#anclaAutomatica').fancybox({
               'width'  : 640,
               'height' : 480,
               'autoScale' : false,
               'autoSize' : false,
               'type' : 'iframe',
               'transitionIn' : 'none',
               'transitionOut' : 'none',
                         ";
     if ($tiempoCierre>0){
        $rutina.="'onComplete': function(){
              setTimeout( function() {\$.fancybox.close(); },$tiempoCierre*1000); 
      };
      $rutina.="});
          \$('#anclaAutomatica').eq(0).trigger('click');
            }); ";
 
      Yii::app()->clientScript->registerScript('emergenteAutomatico',$rutina,CClientScript::POS_READY);
     return $salida;
}

Vamos a ver que hace:

  • Crea una etiqueta html tipo a, y le indica la direccion del enlace que se le pase
  • Carga una variable ($rutina) con un script que se dispara cuando la pagina esta cargada, y aplica al link anterior las características de fancybox, añadiendo el cierre automático si enviamos algo en la variable $tiempoCierre y programa un click automático en el enlace.
  • Da orden a Yii para que cargue el script contenido en $rutina después de cargar el resto
  • devuelve en la variable salida el código necesario

Para que funcione, nos bastara añadir en cualquier vista:

salidaEmergente("http://www.dopc.com")?>

En este caso, se llama a la pagina www.dopc.com, y no se le indica cierre automático

Y si no trabajas con Yii,  para poder utilizarlo en cualquier pagina php, solo debes cambiar  la linea :

Yii::app()->clientScript->registerScript('emergenteAutomatico',$rutina,CClientScript::POS_READY);

y en su lugar, poner:

$salida.="<script>".$rutina."</script>";

Ahora solo deberás incorporar la carga de jQuery y fancybox siguiendo las instrucciones de sus paginas.

 

Para simplificarte los pasos, te dejo un enlace a una pagina que trabaja así, por lo que veras como esta hecho.

 

 

Acerca de Miguel Garcia

Programador, Desarrollador web, Formador en distintas areas de informatica y director de equipos multidisciplinares.
Esta entrada fue publicada en Desarrollo Web, Formacion, Javascript, jQuery, YII - Generador de codigo PHP y etiquetada , , , , . Guarda el enlace permanente.

3 respuestas a Ventana emergente de…cualquier cosa!

  1. Pingback: Ventana emergente al cargar la pagina | Recursos para formacion

  2. andrea dijo:

    Dsiculpa tengo dudas donde colocar las lineas de codigo ,en que archivos

    • Miguel dijo:

      Las puedes colocar en el mismo HTML de la pagina en laque quieras que aparezca la pantalla o, de una forma mas correcta, en un fichero js, y desde HTML llamarlo

Deja un comentario

Este sitio usa Akismet para reducir el spam. Conoce cómo se procesan los datos de tus comentarios.