jueves, 23 de septiembre de 2010

PopUp JQuery (Sencillo)


Anteriormente les había compartido un PopUp con JQuery que estaba utilizando en el blog, pero la verdad estaba bastante extenso y un poco complicado de explicar por los 3 archivos que se implementaban, pues en esta ocasión les traigo ahora si una creación mía,implementando conceptos del aquel post que les comento.

Estoy utilzando una imagen donde llamo la funcion del popup al momento que carga la imagen con la propiedad del Onload, esta propiedad la pueden utilizar dentro de la etiqueta del Head> en caso de que quieran que el popup se cargue cuando cargue su pagina. Ademas de la imagen utilizo un script externo "archivo.js" donde pongo la funcion del popup, pero tambien pueden incluir la funcion dentro de las etiquetas de Script> donde se tendria que hacer referencia al script extremo....


Ahora vamos con el codigo:
Este seria el codigo del script externo, copian el codigo y lo pegan en un bloc de notas y lo guardan como "cualquiernombre.js".



/*PUEDEN CAMBIAR EL width Y EL height PARA AJUSTAR EL TAMAÑO DE LA VENTANA*/
function Abrir_ventana (pagina) {
var opciones=" status=no, toolbar=no, location=no, directories=no, menubar=no, scrollbars=no, resizable=no, width=1, height=1, top=105, left=20";
window.open(pagina,"",opciones);
window.close();
}



Y el codigo de la pagina Html quedaria asi:

<html>
<head>

<!--ESTA LINEA ES PARA QUE NO NOS BLOQUEN LA VENTANA LOS EXPLORADORES DE INTERNET-->
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>

<!--ESTA LINEA ES PARA LLAMAR EL ARCHIVO JAVASCRIPT DONDE ESTA LA FUNCION-->
<script src="scrip.js" type="text/javascript"><!--TAMBIEN PODEMOS COLOCAR AQUI EL CODIGO DE LA FUNCION--></script>

</head>

<body>

<!--AQUI EL CODIGO DE LA IMAGEN , RECUERDEN QUE PUEDEN COLOCAR EL ONLOAD DENTRO DEL HEAD-->
<img src="foto.jpg" width="360" height="200" onload="Abrir_ventana('http://lawebadeloso.listen2myradio.com')" />

</body>
</html>


Pues en esta ocasion el codigo esta muy facil, les dejo aqui el enlace para que puedan descargar y ver como funciona el popup.



9 comentarios:

  1. Si tienen blogger pueden coolocar el codigo de los liks de los scripts y de la imagen en un gadget y deberia de funcionar de la misma manera.

    ResponderEliminar
  2. Descargandoooo!..gracias broder del otro lado del mundo!! pizanlof de este lado para ti y los tuyos de por alla!

    www.radiopeaceandlove.blogspot.com

    YuRcH
    Administrador y gran carnal del Adm de la web del oso.

    ResponderEliminar
  3. jejjeje... de echo somos 2 admins pero el otro compa anda de webon como desde hace 2 meses por que le cortaron el internet.... tubo pedos con el servicio y lo kitaron ....

    ResponderEliminar
  4. I haνe read ѕo many сontent regarding the blogger lovers eхceρt this paragraph is reаlly
    a nicе paragrаph, keep it uр.


    Heге is my web sіte :: crear pagina web

    ResponderEliminar
  5. Ι'm not sure where you'гe gеttіng уοuг
    іnfoгmation, but gгeаt topiс.
    I nееdѕ tо spend sοme time learning moгe οг undеrstanԁing moге.
    Thankѕ foг eхcеllent information I waѕ
    lοoking for thiѕ infο fοr my missiοn.



    Look іnto mу ωebsite: Website laten bouwen

    ResponderEliminar
  6. Thanks for sharіng your thoughts аbοut crie seu site.
    Regards

    ResponderEliminar
  7. Today, I went to the beach front with my kіds. I founԁ
    a sea shеll and gave it to my 4 year old daughter and said "You can hear the ocean if you put this to your ear." She put the shell to her ear anԁ screameԁ.
    Τhere ωаs a heгmit crab inѕide аnd it
    pinched her ear. She never ωants to go back! LοL
    I knοw this is totally off topic but I had to
    tell sοmeone!

    My blog; Making a website

    ResponderEliminar
  8. Greetingѕ! Quick question that's totally off topic. Do you know how to make your site mobile friendly? My website looks weird when browsing from my iphone4. I'm tryіng to find a theme or plugin that might
    bе able to fіх this problem.
    If yοu have any ѕuggеstionѕ, plеase ѕhare.

    Thanks!

    Look into my wеbsitе :: Achat nom de domaine

    ResponderEliminar
  9. Hello! Do уοu use Τwitter?

    Ι'd like to follow you if that would be okay. I'm absolutely enϳoying уοuг blog
    and looκ forwаrd to neω updates.


    Αlѕo visit mу blog post ... CRIE SEU SITE

    ResponderEliminar

En este Blog puedes usar los siguientes atributos y etiquetas HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Related Posts with Thumbnails



Sigueme en Facebook
Sigueme en Twitter