Pop-up desde botón

obi-alf · 11 Jul 2003

Abrir un pop-up desde un botón o link

<script language="JavaScript">

function abrirCaja()
{
posx=((screen.availWidth-320)/2)
posy=((screen.availHeight-200)/2)
eval("boxwindow=window.open('mi_popup.html','boxwindow','width=320,height=200,toolbar=0,directories=0,status=0,scrollbars=0,resize=0,menubar=0,screenx="+posx+",screeny="+posy+",left="+posx+",top="+posy+"')")
}

</script>

Este código va en la página que lanzará el pop-up. Según la medida que queramos, habrá que modificar las medidas 320x240 en los 2 sitios donde se encuentran, al igual que el nombre de la página que queremos abrir.
Los 0 significan desactivado, para activarlos hay que poner 1.

En el link o botón habrá que poner este código:
<a href="java script:abrirCaja()">abiri el pop-up</a>

Si quisieramos abrir un pop-up directamente (una vez se abra la página) solo habría que quitar la fuction y los {}, es decir

<script language="JavaScript">

posx=((screen.availWidth-320)/2)
posy=((screen.availHeight-200)/2)
eval("boxwindow=window.open('mi_popup.html','boxwindow','width=320,height=200,toolbar=0,directories=0,status=0,scrollbars=0,resize=0,menubar=0,screenx="+posx+",screeny="+posy+",left="+posx+",top="+posy+"')")

</script>

Anunciante

Cyber · 11 Jul 2003

Gracias por el tuto amigo ya empezaremos a crecer en estos temas no te preocupes jejejejejjeje 8) 8)

Ronegar · 11 Jul 2003

solo una puntualizacion, esto :

<script language="JavaScript">

posx=((screen.availWidth-320)/2)
posy=((screen.availHeight-200)/2)
eval("boxwindow=window.open('mi_popup.html','boxwindow','width=320,height=200,toolbar=0,directories=0,status=0,scrollbars=0,resize=0,menubar=0,screenx="+posx+",screeny="+posy+",left="+posx+",top="+posy+"')")

</script>

se pone inmediatamente despues de la etiqueta <head>.

Corrigeme si me equivoco amigo Obi, seguramente habra mucha gente q no lo sepa y creo q es importante.

Aqui os dejo otra forma de hacerlo :

Para poner despues de la etiqueta <head>

<script>
function abrirventana(nombre,ancho,alto) {
datos = 'width=' + ancho + ',height=' + alto + ',left=0,top=0,scrollbars=no,resize=no';
window.open(nombre,'',datos)
}
</script>

y en el lugar donde queremos poner el boton o link al pop-up:

<a href="#" onclick="abrirventana('nombre',400,300);>abrir</a>

aqui se pone entre parentesis, el nombre q le daremos a la nueva pagina q se abre en el pop-up, el ancho y el alto del pop-up, en este caso 400 y 300, si queremos cambiar la posicion del pop-up, solo tenemos q darle valores a los parametros left y top q estan en la funcion y q tienen actualmente de valor 0.

Un saludo.
[/b]

obi-alf · 11 Jul 2003

Pos efectivamente eso se me ha pasado.
Por cierto, tu forma es más sencilla que la mia. Me la apunto

Saludos

Ronegar · 12 Jul 2003

Jeje, lo tenia fresco amigo Obi, precisamente el dia antes un amigo me preguntó como podia hacer lo del pop-up y tuve que pensarlo para decirselo. :wink:

Un saludo.

dennyboy · 16 Jul 2003

Je, pues me lo fusilo.... y les debo otra...

Gracias.

diversea · 30 Jul 2003

Muy buenas vuestras formas, me tomo nota.

Yo lo hacía de la siguiente manera.

Yo metía este código dentro de una capa y así, solo he de sustituir los datos, y la capa la puedo poner donde quiera.

<img width=123 height=44 src="Images/vista360.gif" onclick="open('../ficticiaB/panoramica/vista.htm','miventana','toolbar=no,location=no,directories=no,menubar=no,resizable=yes,status=yes,width=420,height=315');">

Donde al final en width y heighto son configurables.

Saludos

diversea · 30 Jul 2003

Como no puedo editar, quiero hacer una puntualización

en el código que he puesto antes, ...

<div class='quotetop'>CITA</div><div class='quotemain'><img width=123 height=44 src=\"Images/vista360.gif\" onclick=\"open('../ficticiaB/panoramica/vista.htm','miventana','toolbar=no,location=no,directories=no,menubar=no,resizable=yes,status=yes,width=420,height=315');\"> </div>

donde pone <i>"Images/vista360.gif"</i> va vuestra imagen y donde pone <i>'../ficticiaB/panoramica/vista.htm' </i>va el resultado que ha de aparecer en el pop up

Es que lo pegué tal cual lo tenía.

Saludos y perdón por el pequeño lio.

ivancarrero · 13 Nov 2003

Aportación

Hola a todos, me gustaría hacer mi aportación sobre el tema. Este suele ser el típico pop up para mostrar imágenes. la ventana será del tamaño exacto de la imagen y aparecerá justamente en el centro de la pantallas y no se podrá modificar.
El js será el siguiente:

<div class='codetop'>CÓDIGO</div><div class='codemain'>

function abrir(ancho,alto,ruta)

{

var miventana;

var posicion_x;

var posicion_y;

posicion_x=(screen.width/2)-(ancho/2);

posicion_y=(screen.height/2)-(alto/2);

//se supone que las imagenes las tenemos en una carpeta llamada imagenes

ruta=\"imagenes\"+ruta;

miventana=open(\"\",\"miventana\",\"width=\"+ancho+\",height=\"+alto+\",menubar=0,toolbar=0,directories=0,scrollbars=no,resizable=0,left=\"+posicion_x+\",top=\"+posicion_y+\"\");

miventana.document.write(\"<html><head><title>Título</title><head>\");

miventana.document.write(\"<body>\");

miventana.document.write(\"<img src=\"+ruta+\">\");

miventana.document.write(\"</body></html>\");

}

</div>

Ahora para lanzar el script al pinchar sobre una imagen debemos pasar el ancho el alto y el nombre de la imagen en la llamada a la funcion, es decir (ejemplo):
<div class='codetop'>CÓDIGO</div><div class='codemain'>

<a href=\"#\" onClick=\"abrir(500,300,'foto1_grande.gif')\">

<img src=\"imagenes/foto1_peq.gif\" border=0 alt=\"Haga click para ampliar\"></a>

</div>

Saludos y espero haber aportado algo nuevo.

otherme · 14 Nov 2003

gracias por la aportacion..

hola gracias por la aportacion..
lo h eintentado y no me ha funcionado completamente.. puede ser que no lo he aplicado bien...

ahora una duda.. si he lograd abrir el popup..solo que me he fijado qeu el popup tieme como title la palabra titulo.. sincerametne trate de modificar el script para pasar ese valor tambien..pero no me funciono..

no sepuede pasar la ruta completa tambien? eso de suponer que todas la imagenes estan en una carpeta "imagenes".. es un poco cerrado.. que tal si tiene varias galerias.. en diferentes carpetas ..

podrias explicarme como hacer esa modificacion?
para pasarle en el mismo enlace el titulo y la ruta a cada pop up..

se que es algo sencillo ..pero ando desvelado y con un dolor de cabeza..que no me deja pensar..

gracias..

Otherme

yo estoy investigando otro metodo .. es algo interesante..y de mucha utilidad para estos foros (por los nuevos sistemsa anti-link) .. solo debo probar que funciona.. y como les digo ahorita.. No es el momento(mi cabeza..hay )

obi-alf · 14 Nov 2003

Otherme, el código javascript lo insertas en un html entre la etiqueta <head> y </head> antes del <body> y para que te aparezca un título solo tienes que ponerlo enla etiqueta <title>Mi título</title>
Te pongo un ejemplo de código para que lo veas mejor.

<span style="color:white">Html que abre el pop-up:</span>
<html>
<head>
<title>Cualquier título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript">

function abrirPopup()
{
posx=((screen.availWidth-320)/2)
posy=((screen.availHeight-200)/2)
eval("boxwindow=window.open('el_popup.html','boxwindow','width=320,height=200,toolbar=0,directories=0,status=0,scrollbars=0,resize=0,menubar=0,screenx="+posx+",screeny="+posy+",left="+posx+",top="+posy+"')")
}

</script>

</head>

<body bgcolor="#FFFFFF">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><a href="java script:abrirPopup">Click para abrir pop-up</a></td>
</tr>
</table>

</body>
</html>

<span style="color:white">Html del pop-up</span>
<html>
<head>
<title>Otro título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF">
<table width="320" height="240" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">Hola Otherme!!!</td>
</tr>
</table>
</body>
</html>

Saludos

otherme · 14 Nov 2003

si eso lo entiendo...Obi alf..

si eso lo entiendo...Obi alf loque digo yo.. es pasarle al script una variable con el value del titulo.. demodo por ejemplo que el popup pueda tener como title el mismo nombre que la imagen .. o el titulo que se me antoke.. me explico???

en el popup....
(html)
(head)
(title) +una variable+ (/title)
(/head)

algo asi..no como abrir el opoup.. si no .. el titulo variable..

a ver si le entndemos. y la verdad es que no he tenido el chance de analizarlo bien.. y/o investigar..

NOs estamso viendo ..

Otherme

ivancarrero · 14 Nov 2003

Te paso el código revisado y como tú dices

Este es el código para que puedas pasar el título de la nueva ventana y si quieres tener imagenes en varias carpetas lo escribes en la llamada a la funcion. copialo tal cual ya que lo he probado:

<html>
<head><title>Mi página</title>
<script>
function abrir(ancho,alto,ruta,titulo)
{
var miventana;
var posicion_x;
var posicion_y;
posicion_x=(screen.width/2)-(ancho/2);
posicion_y=(screen.height/2)-(alto/2);
//se supone que las imagenes las tenemos en una carpeta llamada imagenes
miventana=open("","miventana","width="+ancho+",height="+alto+",menubar=0,toolbar=0,directories=0,scrollbars=no,resizable=0,left="+posicion_x+",top="+posicion_y+"");
miventana.document.write("<html><head><title>");
miventana.document.write(titulo);
miventana.document.write("</title><head>");
miventana.document.write("<body topmargin=0 leftmargin=0>");
miventana.document.write("<img src="+ruta+">");
miventana.document.write("</body></html>");
}
</script>
</head>
<body>
<a href="#" onClick="abrir(500,300,'ruta/foto1_grande.gif','Mi foto 1')">
<img src="imagenes/foto1_peq.gif" border=0 alt="Haga click para ampliar"></a>
</body>
</html>

Si tienes alguna duda házmelo saber.
Un saludo a todos

otherme · 15 Nov 2003

ahora si..y alo veo mejor..

gracias ivancarrero .. ahora si ya lo veo mejro ..(com decimos en Honduras ya esta decente. )

uan observacion..se le podria agregar..

if(titulo==null){titulo=titulopredeterminado}

por si se elvida o no se desea pasar el titulo en algun acacion..??
que te parece??.. eso lo vi en un script de tunait.. y creo que se puede agregar aqui..

Otherme

Pohakatsi · 23 Jun 2006

Hola, he copiado paso a paso la explicacion esta y otras para generara un pop up centrado en medio de la pantalla, pero no lo consigo de ninguna manera.
Alguien ve que es lo que hago mal?

<head>
<script>
function abrirventana(intro.html,800,600) {
datos = 'width=' + 800 + ',height=' + 600 + ',left=0,top=0,scrollbars=no,resize=no';
window.open(intro.html,'',datos)
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Pieces_lab</title>
<script language="JavaScript">

//-->

function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
<style type="text/css">

</style>
</head>

<body bgcolor="#FFFFFF">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><a href="intro.html" onclick="abrirventana"('',800,600);>abrir</a> </td>
</tr>
</table>

</body>
</html>

tambien he probado otors scripts como por ejemplo el generador de pop ups de webexperto. Pero solo lo centra en el ordenador donde lo creo. Es muy raro, si miro la web con otro tamaño de pantalla, el pop up ya no esta en ele centro.

Este es el script y hay algo k esta mal. Porfavor AYUDA!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!





<HEAD>


</script>



<A HREF="java scriptopUp('')">Abrir Ventana Pop Up</A>

ferweb · 29 Ago 2008 a las 18:35

Hola ivancarrero. soy Fernando y quiero consultarte respecto a tu quota sobre el codigo de imagenes con titulos popups ya lo probe estando muy bien,

<span style="color:#FFCC00">pero me pasa que luego de abrir el popup con la imagen me vuelve abrir otra pagina html normal osea la que abre el popup... lo hace automaticamente sin que yo pulse nada . . .</span>

luego quisiera que la pag. html que me muestre varias imagenes y que cada una me abra solamente su popup respectivo... lo que seria en el body

ahora por que ?
lo hice el enlace con una imagen q abra su popup pero se muestra de tamaño natural, no lo puedo reducir,
q si lo modifico el ancho y altura asi como ancho y altura en la pagina popup, veo q si no coinciden sale error o no abre el popup,

y si coloco varias imagenes distintas y con enlaces en el body del html que abre el popup ... en la pagina html solo me muestra la primera imagen, pero el popup si me muestra la imagen del enlace respectivo

Gracias espero me ayudes y poder resolver esos detalles,
calin_sc(arroba)hot : lei q el mail se podia poner asi? espero me confirmes si es valido o no para evitar la prox vez

respecto a la consulta espero alguien pueda decirme como modificar o corregirlo . . . gracias

ivancarrero dijo: ↑

Este es el código para que puedas pasar el título de la nueva ventana y si quieres tener imagenes en varias carpetas lo escribes en la llamada a la funcion. copialo tal cual ya que lo he probado:
Hacer clic para expandir...

Accede o regístrate

Pop-up desde botón

obi-alf Nuevo usuario

Anunciante

Cyber Nuevo usuario

Ronegar Nuevo usuario

obi-alf Nuevo usuario

Ronegar Nuevo usuario

dennyboy Guest

diversea Nuevo usuario

diversea Nuevo usuario

ivancarrero Nuevo usuario

otherme Nuevo usuario

obi-alf Nuevo usuario

otherme Nuevo usuario

ivancarrero Nuevo usuario

otherme Nuevo usuario

Pohakatsi Guest

ferweb Nuevo usuario

Accede o regístrate

Pop-up desde botón

obi-alf Nuevo usuario

Anunciante

Cyber Nuevo usuario

Ronegar Nuevo usuario

obi-alf Nuevo usuario

Ronegar Nuevo usuario

dennyboy Guest

diversea Nuevo usuario

diversea Nuevo usuario

ivancarrero Nuevo usuario

otherme Nuevo usuario

obi-alf Nuevo usuario

otherme Nuevo usuario

ivancarrero Nuevo usuario

otherme Nuevo usuario

Pohakatsi Guest

ferweb Nuevo usuario

Búsquedas útiles