Calificación:
  • 1 voto(s) - 5 Media
  • 1
  • 2
  • 3
  • 4
  • 5
[Javascript] Efecto-Pop_up.
#1
Este Pop up esta listo para funcionar al momento que carga la pagina (el DOM).
Si quiers abrirlo al hacer click en algo click aqui.[/php]
Para cerrarlo se hace click en la imagen "X":

Código PHP:
<style>div#pop-up{padding:12px;width:400px;border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px;
position:absolute;
top:10%;
left:-50%;
z-index:2;
display:none;
opacity:0;
background-color:COLORFONDO;color:COLORLETRA;border:1px solid black;
}</
style>
<
script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<
script>$(document).ready(function(){
pop=$("div#pop-up");
if($(
'#abrirPopup').length==0)abrir();
//funciones abrir cerrar adan-2994.es.tl
function abrir(){ pop.stop().css'display','block' ).animate({'left':'33%','opacity':1} ,900); }
function 
cerrar(){ pop.stop().animate({'left':'-50%','opacity':0},900,function(){pop.css('display','none');}); }
$(
"div#cerrar").click(function(){cerrar();});
$(
'#abrirPopup').click(function(e){e.preventDefault();abrir();
});
});
/*codigo por jonatan*/</script>

<
div id="pop-up" >
<
div style="cursor:pointer;width:28px;height:28px;background-size:28px;background-image:url([color=#FF6347]http://img.webme.com/pic/a/adan-2994/cerrar2.png[/color]);background-repeat:no-repeat;" id="cerrar"></div>
 
[
color=#FF6347]Aqui escribes tu anuncio o colocas tus imagenes[/color]

</div


TE QUEDA ASI LE PUEDES DAR COLOR ETC.

[Imagen: 090F3A7AD04PNG.html]


EL CODIGO NO ES MIO SIMPLEMENTE LO DOY A CONOCER ES UN BUEN CODIGO
#2
No funciona la demo, anda ponla bien para poder comprobar como funciona
elCSS.com
[Imagen: 33jsqk6.png]
Crece con nosotros || Síguenos en Twitter - Facebook - RSS
WWW
#3
te edito el post para que quede mejor presentado y que no haya problemas. Por favor usad las etiquetas de los bbcodes cuando vayais a pegar código Guiño
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  como obtener efecto nieve fercol 13 309 02-01-2017, 11:38 PM
Último mensaje: onspot
  [Tutorial] Métodos para redireccionar URLs (HTML, PHP y Javascript wiston3 1 125 01-12-2016, 11:12 PM
Último mensaje: zeuz
  Linux Foundation respalda JavaScript Kiichi 3 137 03-11-2016, 03:43 AM
Último mensaje: habacuc78
  [Aporte] Curso básico de Javascript habacuc78 22 800 05-07-2016, 03:53 PM
Último mensaje: escuelasegura
  Trucos y efectos de Javascript para tu página web CarlosAlberto 0 376 05-01-2016, 03:51 PM
Último mensaje: CarlosAlberto
Sonrisa [Tutorial] Cómo utilizar Javascript para actualizar un Título R0bert0 0 295 05-12-2015, 10:07 PM
Último mensaje: R0bert0
Bombilla [Tutorial] Cómo utilizar Javascript para reproducir un archivo R0bert0 0 237 05-12-2015, 10:02 PM
Último mensaje: R0bert0
  [Tutorial] Calculadora sencilla en JavaScript luis.ml 3 383 21-09-2015, 12:03 PM
Último mensaje: riblier
  Ayuda con Contador en JavaScript alemagno 2 245 25-06-2015, 06:29 PM
Último mensaje: alemagno
  Caracteres especiales en javascript MikaCookies 4 460 09-03-2015, 01:41 AM
Último mensaje: MikaCookies



Usuarios navegando en este tema: 1 invitado(s)