Mostrando entradas con la etiqueta Pop-up. Mostrar todas las entradas

Ver entrada completa.
Bloquear ventanas emergentes pop-up

Ya hemos visto en varias entradas como hacer ventanas pop-up.

Ahora les traigo el código para bloquear las ventanas pop-up.

¿Para que puede ser útil?

Algunas veces entramos en algunos blog y nos abre una molesta ventana con publicidad.

Si tu eres administrador del blog y no sabes como quitar esa molesta ventana.

Tus lectores te avisan que les molesta cada ves que entran a tu blog se les abre esa ventana.

Acá tienes la solución para que no la muestre mas.

Ir a Diseño, Edición de HTML y justo abajo de <head>

Poner el siguiente código:

<script>
function bloquear(){
return true;
}
window.open = function(){return true};
</script>

La mejor solución es quitar lo que crea esa ventana con publicidad, en la mayoría de los casos es por contadores.

Si utilizas Ventanas pop-up para mostrar tus propios avisos, no podrás poner este código.

Ver entrada completa.
Abrir ventana emergente pop-up centrada

Ir a Diseño, Edición de HTML y justo arriba de </head>

Poner el siguiente código:

<script language="JavaScript">
//<![CDATA[
function AbrirCentrado(Url,NombreVentana,width,height,extras,scrollbars) {
var largo = width;
var altura = height;
var adicionales= extras;
var top = (screen.height-altura)/2;
var izquierda = (screen.width-largo)/2; nuevaVentana=window.open(''+ Url + '',''+ NombreVentana + '','width=' + largo + ',height=' + altura + ',top=' + top + ',left=' + izquierda + ',features=' + adicionales + '' + ',scrollbars=1');
nuevaVentana.focus();
}
//]]>
</script>

Y el link para abrir la ventana:

<a href="javascript: void(0);" onclick=" javascript:AbrirCentrado('http://loseasi.blogspot.com/2010/06/ventana-emergente-pop-up.html','NombreVentana','510','280','scrollbars=1');">Abrir ventana centrada</a>

Ejemplo abrir ventana centrada:
... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa.
Abrir ventana emergente pop-up con desplazamiento deslizante

Ya vimos anteriormente varias formas de abrir ventanas emergentes Pop-Up. Ver

Ahora abriremos una ventana Pop-Up con un efecto deslizante con desplazamiento desde arriba y hacia la derecha.

Colocaremos el código JavaScript.

Ir a Diseño, Edición de HTML y justo arriba de </head>

Poner el siguiente código:

<script type="text/javascript">
//<![CDATA[
function ventanadeslizante()
{
ancho=100
alto=100

fin=700
x=50
y=50
ventanaURL="http://www.google.com"

ventanades = window.open("", "_blank", "resizable,height=1,width=1,top=x,left=y,screenX=x,screenY=y,scrollbars=yes");
abrirVentanadeslz();
}
function abrirVentanadeslz();{;if

(ancho<=fin) {
ventanades.moveTo(x,y);
ventanades.resizeTo(ancho,alto);
x+=5
y+=5
ancho+=25
alto+=15
timersetTimeoututabrirVentanadeslzlz()",1)
}
else
{
clearTimeout(timer)
ventanades.location=ventanaURL
}
}
//]]>
</script>

Cambiar URL de la página.

Se puede ajustar el tamaño de la ventana donde dice: fin=700

Para abrir la ventana hay que llamar a la función: ventanadeslizante()

Lo podemos hacer de varias formas, por ejemplo:

Desde un link:

<a href="javascript:ventanadeslizante()">Abrir Ventana</a>

Desde un botón:

<form>
<input type="button" value="Abrir Ventana" onClick="ventanadeslizante()"/>
</form>

Ver ejemplo:

... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa.
Pop-up con mensaje

Si quieres dejar un mensaje a tus visitantes al entrar a tu blog o página, como por ejemplo un nuevo proyecto, invitarlo a comentar o a suscribirse, un nuevo sorteo o lo que tu quieras informar.

Lo puedes hacer mediante una ventana Pop-up.

Tienes que poner el siguiente código arriba de </head>:

<script LANGUAGE="Javascript">
//<![CDATA[
function popupmensaje() {
text = "<html>\n<head>\n<title></title>\n<body>\n";
text += "<center>\n<br/>";
text += "<font style='color:#0093DD;'>";
text += "¡Hola! ¿Por qué no te animas y dejas algún comentario?";
text += "<br/>";
text += "¡Hola! ¿Por qué no te suscribes y así estar actualizado?";
text += "</font>";
text += "</center>\n</body>\n</html>\n";
setTimeout('windowProp(text)', 1000); //tiempo demora en abrir
}
function windowProp(text) {
newWindow = window.open('','newWin','width=400,height=100'); // ancho y alto de la ventana
newWindow.document.write(text);
setTimeout('closeWin(newWindow)', 10000); //tiempo que se cierra sola la ventana
}
function closeWin(newWindow) {
newWindow.close();
}
popupmensaje()
//]]>
</script>

Rojo: El mensaje que quieres que diga tu ventana Va entre las 2 ""
Naranja: Tiempo en milisegundos que tarda en abrirse el pop up después de cargar la página (3000 = 3 segundos)
Verde: Tamaño del pop up (width = ancho y height = alto)
Azul: Tiempo en milisegundos que tarda en cerrarse el pop up después de que se abra (5000 = 5 segundos)
Celeste: color de texto.

Se puede personalizar el estilo con CSS.

Si no quieren que el mensaje aparesca al entrar para poder utilizarlo en un link o imagen, solo hay que quitar la siguiente linea:

popupmensaje()

Y para llamar a la función y así abrir la ventana:

<a href="javascript:popupmensaje()">Texto o imagen para abrir Ventana</a>

Ejemplo de abrir Ventana con un link
... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa.
Abrir 2 ventanas emergentes pop-up

Antes vimos como abrir 1 ventana emergente pop-up.

Hoy les voy a dar el código para poder abrir 2 ventanas pop-up al mismo tiempo.

Crearemos una función con los elementos que queremos que tengan nuestras ventanas pop-up junto con los link que se abrirán.
Ponemos el siguiente código arriba de </head>:

<script language="javascript">
function abrir2popup()
{
a= window.open("http://link1","",
"toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=500, height=185, top=85, left=140");
b= window.open("http://link2","",
"toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=500, height=185, top=185, left=240");
}
</script>

Cambiar los link y personalizar el pop-up.
En la otra entrada mostre la forma de pesonalizar el pop-up, así que no lo voy a hacer en esta entrada.

Ahora llamaremos a la función.

<a href="javascript:abrir2popup()">Texto o Imagen</a>

Por algunas preguntas realizadas anteriormente agrego que no solo se pueden abrir otras páginas con una ventana pop-up, también abre imágenes, flash, videos, etc...

Ver Ejemplo:
Abrir 2 Ventanas ... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »

Ver entrada completa.
Ventana emergente pop-up

Ventanas emergentes en sitios web o blog.

El término denomina a las ventanas que emergen automáticamente (generalmente sin que el usuario lo solicite) mientras se accede a ciertas páginas web. A menudo, las ventanas emergentes se utilizan con el objeto de mostrar un aviso publicitario de manera intrusiva. Una técnica relacionada a esta es la denominada pop-under (que consiste en abrir de manera intempestiva nuevas ventanas que se sitúan detrás de la ventana en uso).

Los anuncios pop-under (como dicho anteriormente) son una variedad de lo que son los pop-up.

Leer más en Wikipedia:

Pop-up con JavaScript.

Primera forma:

Crearemos una función con los elementos que queremos que tenga nuestra ventana.

Ponemos el siguiente código arriba de </head>:

<script language="JavaScript">
function Abrir_ventana (pagina) {
var opciones="toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=508, height=365, top=85, left=140";
window.open(pagina,"",opciones);
}
</script>

Elementos para dar forma a la ventana:

fullscreen: Hace que la ventana se abra en toda la pantalla.
toolbar: Hace que la ventana se abra con o sin barra de herramientas.
location: Hace que la ventana se abra con o sin barra de direcciones.
directories: Hace que la ventana se abra con o sin barra directorios.
status: Hace que la ventana se abra con o sin barra de estado.
menubar: Hace que la ventana se abra con o sin barra de menú.
scrollbars: Hace que la ventana presente o no las barras de desplazamiento.
resizable: Si la ventana puede cambiar de tamaño o no.
width: El ancho de la ventana.
height: El alto de la ventana.
top: La posición vertical de la ventana.
left: La posición horizontal de la ventana.

Cuando ponemos el atributo=YES estamos forzando a que ese elemento se vea.
Cuando ponemos atributo=NO lo que hacemos es evitar que ese elemento se vea.

Ahora llamaremos a la función.

Les voy a dar 3 ejemplos con los cuales podemos abrir nuestra ventana pop-up.

Abrir una ventana al entrar a la página.

<body onload="Abrir_ventana('http://URL/ejemplo-popup.html')">

Abrir una ventana al cerrar la página.

<body onunload="Abrir_ventana('http://URL/ejemplo-popup.html')">

Estos 2 ejemplos anteriores se colocan reemplazando la etiqueta <body>.

Abrir un ventana a través de un enlace. (El enlace llama a la función que abre la ventana)

<a href="javascript:Abrir_ventana('http://URL/pop-up.html')">Click aquí para abrir la ventana</a>

Cambiar link del pop-up (http://URL/pop-up.html).
Cambiar (Click aquí para abrir la ventana) por otro texto o una imagen.
Poner en el lugar que se quiera mostrar el link.

Ver ejemplos:

Segunda forma:

Para mí, esta es la mejor manera. (la recomiendo)

No necesitamos poner ningun otro código, solamente se coloca el siguiente código en el lugar que se quiera mostrar el link.

Abrir un ventana a través de un enlace. (El enlace llama a la función que abre la ventana)

<a href="http://URL/pop-up.html" onClick="window.open(this.href, this.target, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, width=508, height=365, top=85, left=140'); return false;">Click aquí para abrir la ventana</a>

Cambiar link del pop-up (http://URL/pop-up.html).
Cambiar (Click aquí para abrir la ventana) por otro texto o una imagen.
Cambiaremos los elementos segun quieramos mostrar la ventana al igual que en la primera forma.

Ver ejemplo:
Click aquí para abrir la ventana ... ¡¡Si estas viendo esto!!, es porque la entrada no contiene texto, puede contener solo imágenes o un vídeo. Da clic sobre "Continuar leyendo", o en el título para ver su contenido ...

Continuar leyendo »