Dudas usando jQuery

RoNiK #1 Oct '12

Hola,

He estado probando un código para mostrar un popup con un formulario en mi página. Y funciona bien.

El código es:

<script type="text/javascript">
$(document).ready(function(){
  $('#open').click(function(){
        $('#popup').fadeIn('slow');
    });

$('#close').click(function(){
    $('#popup').fadeOut('slow');
});
});
</script>

Y

<div id="popup" style="display: none;">
    <div class="content-popup">
        <div class="close"><a href="#" id="close"><img src="images/close.png"/></a></div>
        <div>Contenido POPUP</div>
    </div>
</div>

El tema es que me gustaría que al abrir el popup el resto de la página tenga opacidad o que tengo un color más oscuro. Para que se vea bien el popup, lo habréis visto en más paginas.

Y ademas si es posible me gustaría cambiarle el efecto por otro.

Gracias!

Metaza #2 Oct '12

¿Has pensado en usar el método .css()? ¿O abrir una capa que ocupe todo el ancho y alto de la página y tenga opacidad?

eXtreM3 #3 Oct '12

Yo lo hacía "a lo cutre". Creaba una capa con display none y un fondo con opacidad 70% negro width 100% y height 100%. Al mostrar el popup también muestras esta capa, que estará por encima de todas, y por debajo del popup (z-index hablando)

La forma pro es asignarle una clase al body con opacidad 0.7 cuando salte el popup y al cerrarlo restaurarle el css original al body

1 respuesta

xMarston #4 Oct '12

La forma pro dice , la mayoría de páginas hacen la primera opción que dices pero vamos, con jQuery es igual de fácil la primera como la segunda opción.

1

RoNiK #5 Oct '12

#3 Lo intenté como tú dices con la forma 'cutre' pero no hay forma... me da también opacidad al popup !_!

1 respuesta

eXtreM3 #6 Oct '12

#5 el popup tiene que tener la propiedad z-index más alta que la de fondo. Dedícate primero a maquetar una capa con position absolute y opacity 0.7 (la de fondo) y encima de ella (con z-index mayor) la del popup.
Cuando lo tengas -> jQuery y listo!

Si no te sale pon códigos y te echamos una mano

1 respuesta

RoNiK #7 Oct '12

#6 Por fin! lo conseguí, gracias!.

Pero debo apuntar algunos detalles, por si a alguien le sirve

Lo primero el <div> lo creaba al principio de la página y lo cerraba al final, englobando todo la página y eso hacía que no funcionase correctamente. Al final lo he abierto y cerrado al mismo principio, eso no lo detallaste y me estaba funcionando mal XD.

Lo otro es que se debe poner position:fixed en lugar de absolute, porque con absolute el fondo sería del 100% de ancho y alto pero cuando haces scroll para abajo no hay fondo allí. No sé si me explico, conclusión se pone fixed y punto XD para que así siempre haya fondo.

1 respuesta

eXtreM3 #8 Oct '12

#7 correcto, se me olvidó lo de que se abre y se cierra en la misma línea (creí que lo estabas dando por hecho xD) y lo del absolute/fixed... también correcto por lo del scroll.

Congrats!

RoNiK #9 Oct '12

Aprovecho este hilo porque me ha surgido una duda con esto mismo del Popup

Bien tengo este código ahora mismo

<script type="text/javascript">
		function email(id){
		
    jQuery("#popup"+id).toggle("slow");
	 jQuery("#container").css("display","inline");
	 
	  jQuery("#close"+id).click(function(){
   jQuery("#popup"+id).fadeOut("slow");
   jQuery("#container").css("display","none");
});

  };
 
  
</script>';

El popup se cierra con una X en una esquina lo normal vaya xD. Pero me gustaría que también se cerrase cuando se clickea fuera del popup.

A ver si sabeis decirme que debería añadir para que haga esto.

Gracias, saludos.

2 respuestas

RaymaN #10 Oct '12 Sureño

#9

$(document).click(function(event) {
	if (!$(event.target).is('#container'))
		$('#container').hide();
});

1 1 respuesta

glolg #11 Oct '12

#9

$('#fondo_con_opacidad').click(function(){
	$('#popup').fadeOut('slow');
	$('#fondo_con_opacidad').fadeOut('slow');
});

1 1 respuesta

RoNiK #12 Oct '12

#10 #11 Gracias

Dudas usando jQuery

Usuarios habituales

Tags