¿Cómo crear un popup con jQuery UI?

0

Los popups han sido utilizados mayormente para llamar la atención del usuario en un área en particular. Ya sea una imagen, texto, un video o alguna animación. Hoy en día, la mayoría de estos popups son bloqueados por los navegadores y los filtros de publicidad pues pueden resultar muy invasivos y molestos. Existe una alternativa en jQuery UI para crear estos “popups”, sin embargo, realmente no lo son. Vamos a ver cómo crear un popup con JQuery UI y descubrir qué son realmente, pues estos no pueden ser bloqueados por filtros de publicidad ni por los navegadores.

Lo primero que debemos hacer es entrar a la página de jQuery UI en la sección de “Demos” buscar la opción “Dialog”.

Vamos a ver además que contamos a mano derecha con una lista de opciones. Estas opciones son posibles configuraciones para estos “popups” que crearemos. En este caso, nos quedaremos con la opción por defecto pues resulta ser la más simple de utilizar. No obstante, estaremos realizando ciertas modificaciones para que se adecue más a lo que queremos lograr.

Para poder obtener el código del ejemplo que podemos ver en dicha página, debemos hacer click en el botón “view source code” el cual se encuentra al costado de la imagen de un ojo:

ojo_general

Una vez que hayamos hecho click, aparecerá el código fuente que genera dicho ejemplo. Debemos copiar dicho código a un archivo .html para que pueda funcionar.

Realizaremos ciertas modificaciones que nos permitirán que la ventana de diálogo tenga un comportamiento más parecido al de un popup, es decir, que luego de hacer click en un vínculo, se abra dicha ventana de diálogo al estilo de un popup. Estaremos modificando el código javascript para que pueda tener dicho comportamiento. El código debe quedar de la siguiente manera:

<script>
  $(function() {
	$("#dialog").hide();
    function abrir() {
		$("#dialog").show();
		$( "#dialog" ).dialog();
	}
	
	$("#abrirPopup").click(function(){
		abrir();
	});
  });
  </script>

Además, el <body> debe quedar con el siguiente vínculo:

<body>
 
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<a href="#" id="abrirPopup">Click aca</a> 
 
</body>

Como se puede observar, hemos creado una nueva función la cual se encarga de abrir el popup. Además, hemos agregado un vínculo al cual al hacerle click, llama a la función de apertura del diálogo para que así pueda verse como si fuese un popup real. En dicho popup nosotros podemos poner cualquier clase de contenido: texto, imágenes, videos, etc.

2

Comparte este post.
Artículos Recomendados Para Tí:

Escribe tu comentario