¿Quieres registrarte?

Cómo crear un Pop-Up en JavaScript

Por: Distriker
6 de Marzo del 2009
6,487 visitas

Aquí os traigo un pequeño tip sobre como crear un Pop-Up en JavaScript. También os explico algunas de sus variantes, espero que os ayude a todos. No coloco todas las variantes aquí, solo unas cuantas, mas adelante pondré mas.

El Pop-Up


El codigo del Pop-Up es el siguiente:
Código:

Código :

<script>
window.open("http://www.foro-informaticos.com","","width=550,height=420")
</script>


Pruebenlo.
Recordatorio: Desactivar "Bloquear ventana emergente".

Los scripts hay que ponerlos entre las etiquetas <script></script>, recuerden esto para siempre ;).

En el Pop-Up (ventana secundaria) puede tener varias variaciones. Una puede ser la de ponerle la barra de desplazamiento:

La barra de desplazamiento


Ahora viene la pregunta, ¿Como se colocan esas barras de desplazamiento? Muy sencillo. Solo teneis que añadir despues de height y separando con una coma:

Código:

Código :

scrollbars=yes
o
scrollbars=1


Información: 1= Si - 0= No

Entonces, quedaría así:

Código:

Código :

<script>
window.open("http://www.foro-informaticos.com","","width=550,height=420,scrollbars=yes")
</script>

o así:

Código :

<script>
window.open("http://cristalab.com","","width=550,height=420,scrollbars=1")
</script>


Pruebenlo.
<i>Recordatorio: Desactivar "ventana emergente"</i>.

La barra de estado


También le podeis agregar la barra de estado, solamente añadiendo esto:

Código:

Código :

menubar=yes

o

Código :

menubar=1


Recuerden, si quereis que no tenga el menubar, no hace falta que se lo pongais ;).

Quedaría así:

Código:

Código :

<script>
window.open("http://cristalab.com","","width=550,height=420,menubar=yes,scrollbars=yes")
</script>


Pruebenlo
Recordatorio: Desactivar "ventana emergente".

¿Qué os parece? ¿Os ha gustado? ¿Os ha servido? ¿Alguna duda? Si es así, preguntadla.

En realidad, un Pop-Up suele ser una ventana sin nada o con el minimo, pero ustedes pueden buscar mas atributos que se le puedan atribuir a este sencillo codigo, venga, animense ;).

Espero que os haiga gustado.

Puede que mas adelante publique mas de mis cosillas ;).

Saludos

Enviar a twitter Enviar a facebook


También te interesa


Etiquetas javascript

Comentarios | Enviar un comentario
Es interesante una modo de abrir PopUps compatible con un navegador sin javascript:

<script>
function abrirVentana() {
// codigo popUp
}
</script>


Y hacer la llamada desde un enlace del siguiente modo:

<a href="link.html" target="_blank" onclick="abrirVentana(); return false;">Abrir Ventana</a>

De este modo si el navegador no tuviera avtivado javascript, abriría la pagina en una nueva ventana (no popup).

En resumen una forma más accesible de utilizar los popups
Por: Jordifreek-blog
Si, la verdad que con esa forma se puede acceder sin JS activado, pero realmente el JS se suele desactivar para ver diferencias y todo eso, por ej. Yo lo desabilito para ver si eso es JS o no.

Saludos
Por: Distriker
La mayoria de los navegadores han combatido los popup por el mal uso que se les ha dado, sobre todo en la forma de mostrar publicidad no deseada, pero personalmente creo que es una herramienta valida para abrir una imagen por ejemplo o informacion complementaria, (abrir formularios etc). Para complementar los script, no olvidar el Top=200 y el Left=200 y tambien el Resizable=no cada uno de ellos separados por una coma
Por: ramatis4620-blog
Si, es verdad, yo odio los Pop-Up publicitarios, por eso recomiendo utilizarlos con cuidado.

Saludos
Por: Distriker
si la verdad ya a llegado un punto en que normalmente pop-up = eje del mal, yo normalmente las pocas veces que me salen los cierro antes de que se carguen.
Buen tip igualmente.
Por: Atomik-blog
Bien, lo mejor es usar un pedazo de codigo al estilo lightbox, slimbox, etc. hay muchos mas utiles, mas foco al usuario etc...
Por: tomasdev
ok mira yo tengo esto en my html y me funciona bien <li><a href='http://radiovideolalaguna.blogspot.com/' target='Blank'>VIDEO LLAMADA'S</a></li>
Ahora lo que yo queiro es quitar las barras y dejar solamente la barra de estado como agrego? si el tu has puesto no me funcionan..
gracias por tu respuesta
Por: jomari-blog
Perdona Jomari, pero el codigo que puse que dice La barra de estado está equivocado (el codigo o el titulo, depende desde donde lo quieras ver :lol:)

Mira, para la barra de estado solamente habría que agregar esto:

Código :

Status=yes


Espero que se te solucione.

Saludos
Por: Distriker
y si quiero que el popup se abra detras de la web? o minimizado?
gracias
Por: david-blog
Mira ver si te sale insertando esto:

[code]<script languaje="javascript">
self.blur()
</script>[code]

Saludos
Por: Distriker
como se puede desactivar
Por: javierxifre@telefonica.ne

javierxifre@telefonica.ne :

como se puede desactivar


¿Desactivar el qué? ¿Los Pop-Ups?

Si es eso, pues es simple.

Lo siguiente vale si tienes Firefox, vas a Herramientas/Opciones/Contenido/Y pulsas bloquear ventanas emergentes.

Además de esto, también creo que hay extensiones que podrás instalar en tu Firefox.

Saludos y suerte.
Por: Distriker
Hola Distriker, la verdad en esto de los javascripts llevo muy poco, pero estoy realizando una pagina web con formularios y deseo que al dar clic en un vinculo se me abra un popups pero que al abrir este, la pagina que lo invoco se quede bloqueada, y solo se active hasta cuando la otra se le de clic en dos botones que se tienen (aceptar/cancelar). Por ejemplo, tengo que agregar un usuario pero antes de esto quiero validar buscando primero en la base de datos si ya existe y pues queria como implementarlo lo que se describio anteriormente
Por: bolivar-blog
vytjon cawq
Por: 123-blog
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.