Ver Mensaje Individual
  #1 (permalink)  
Antiguo 18/02/2011, 18:56
ffrago
 
Fecha de Ingreso: febrero-2011
Mensajes: 5
Antigüedad: 13 años, 10 meses
Puntos: 0
Pregunta Seleccionar Div a abrir con jquery

Buenas, mi problema es que tengo un panel de noticias y para cada noticia tengo un div creado en el que hay la información ampliada de la noticia. Toda la información la saco de una bbdd en php. El problema és que cuando llamo a la función siempre me abre el mismo div (en este caso "popUpDiv") y me gustaria pasarle una variable con el nombre del div a abrir. És decir que me abriera el div que quisiera (popUpDiv o popUpDiv2).
Pongo el codigo :

Los DIV
Código HTML:
 <div id="capaPopUp"></div> //El que hace la opacidad del fondo

    <div id="popUpDiv">
        <div id="capaContent">
            <div>Información expanida noticia 1</div>
            <a href="javascript:void(0);" title="Cerrar" id="cerrar">Cerrar</a>
	</div>
    </div>

    <div id="popUpDiv2">
        <div id="capaContent">
            <div>Información expanida noticia 2</div>
            <a href="javascript:void(0);" title="Cerrar" id="cerrar">Cerrar</a>
	</div>
    </div> 

HTML que uso para abrir el div
Código HTML:
<a href="javascript:void(0);" title="Abrir PopUp" id="abrirPop"><img src="pics/home/kk.jpg" width="950" height="250" border="0" /></a> 

Código Javascript:
Ver original
  1. //Variable que almacenará la posición del scroll, por defecto tiene valor 0.
  2. var scrollCachePosition = 0;
  3.  
  4. $(function() {
  5.     $("#abrirPop").click(function(event) {
  6.         var nom_pop = "popUpDiv";
  7.         scrollCachePosition = $(window).scrollTop();
  8.         //Envío el scroll a la posición 0 (left), 0 (top), es decir, arriba de todo.
  9.         window.top.scroll(0,0);
  10.  
  11.         //Si el body es mas grande que la capa 'wrapper' incrementa la altura del body a la capa 'capaPopUp'.
  12.         if ($("body").outerHeight()>$("#wrapper").outerHeight()){
  13.             var altura=$("body").outerHeight();
  14.         }else{
  15.         //Si la capa 'wrapper' es más grande que el body incrementa la altura de la capa 'wrapper' a la capa 'capaPopUp'.
  16.             var altura=$("#wrapper").outerHeight();
  17.         }
  18.         window.document.getElementById("capaPopUp").style.height=altura+"px";
  19.         event.preventDefault();
  20.         //Muestro la capa con el efecto 'slideToggle'.
  21.         $("#capaPopUp").slideToggle();
  22.  
  23.         //Calculo la altura de la capa 'popUpDiv' y lo divido entre 2 para darle un margen negativo.
  24.         var altura=$(popUpDiv).outerHeight();
  25.         $(popUpDiv).css("margin-top","-"+parseInt(altura/2)+"px");
  26.        
  27.         //Calculo la anchura de la capa 'popUpDiv' y lo divido entre 2 para darle un margen negativo.
  28.         var anchura=$(popUpDiv).outerWidth();
  29.         $(popUpDiv).css("margin-left","-"+parseInt(anchura/2)+"px");
  30.        
  31.         //Muestro la capa con el efecto 'slideToggle'.
  32.         $(popUpDiv).slideToggle();
  33.     });
  34.     $("#cerrar").click(function(event) {
  35.         event.preventDefault();
  36.         //Cierro las capas con el efecto 'slideToggle'.
  37.         $("#capaPopUp").slideToggle();
  38.         $(popUpDiv).slideToggle();
  39.         //Si la variable scrollCachePosition es mayor que 0 incrementará la posición del scroll al valor que se almacenó.
  40.         if (scrollCachePosition > 0) {
  41.             window.top.scroll(0,scrollCachePosition);
  42.             //Reseteamos la variable scrollCachePosition a 0 para poder ejecutar el script tantas veces sea necesario.
  43.             scrollCachePosition = 0;
  44.         }
  45.     });
  46. });