Enjoy A New Student Discount All 55,000 Courses on sale for Only $12.99

Ends in 05h 23m 49s

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.

 

 

12 comentarios

    1. 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

    1. 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

    1. 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

    1. 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

/*Si te ha gustado el artículo
no dudes en compartirlo*/

Facebook
Twitter
LinkedIn

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies

Ver mi IP

Ver ip de mi máquina
tipo valor
Ip: 18.208.132.74
Proxy:
Remote host: ec2-18-208-132-74.compute-1.amazonaws.com
Remote port: 50154
** 18.208.132.74