循环内的position定位_html/css_WEB-ITnose

本帖最后由 wangruixi 于 2013-03-16 17:04:34 编辑

本人碰到了这样一个问题，我想实现下面页面介绍的方法。在单个商品的详细页，这个功能实现很好。
http://hi.baidu.com/gyfcw/item/5193c2f357586c1f84d278d9

但问题来了。在分类商品列表页面，多个商品通过循环列表方式显示出来；每个商品显示的位置都包含了一个“加入购物车”按钮。我的目的是希望通过点击任何一个商品的“加入购物车”按钮，在相应位置弹出一个确认窗口。但不管我添加列表哪个商品，弹出窗口都出现在第一个商品的位置，也就是说似乎所有弹出窗都以第一个商品最为父元素了。

请指点，多谢了！


...
                     

 //弹出窗包含position:absolute属性
            

                     

...
 

回复讨论(解决方案)

没有人知道吗？？？

得看你这个addToCart函数怎么实现弹出窗口的。

弹出窗口的实现代码如下，我是参考这个链接实现的。在单个商品详细页只显示一个商品信息的时候弹出窗口的定位没问题。但是在分类商品的列表页当列出多个商品“加入购物篮”时（PHP代码是通过foreach循环实现），弹出窗口总是定位到了第一个商品的位置。
http://hi.baidu.com/gyfcw/item/5193c2f357586c1f84d278d9


/* *
* 点击购物后弹出提示层 
* 参数 cartinfo：购物车信息 
*/
function openDiv_ecshop120(cartinfo) 
{
  var _id = "speDiv";
  var m = "mask";
  if (docEle(_id)) document.removeChild(docEle(_id));
  if (docEle(m)) document.removeChild(docEle(m));
  //计算上卷元素值
  var scrollPos; 
  if (typeof window.pageYOffset != 'undefined') 
  { 
    scrollPos = window.pageYOffset; 
  } 
  else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') 
  { 
    scrollPos = document.documentElement.scrollTop; 
  } 
  else if (typeof document.body != 'undefined') 
  { 
    scrollPos = document.body.scrollTop; 
  }

  var i = 0;
  var sel_obj = document.getElementsByTagName('select');
  while (sel_obj[i])
  {
    sel_obj[i].style.visibility = "hidden";
    i++;
  }

  // 新激活图层
  var newDiv = document.createElement("div");
  newDiv.id = _id;
  newDiv.style.position = "absolute";
  newDiv.style.zIndex = "10000";
  newDiv.style.width = "289px";
  newDiv.style.height = "120px";
  newDiv.style.top = "-120px";
  newDiv.style.left = "1px"; 
  newDiv.style.overflow = "hidden"; 
  newDiv.style.background = "#FFF";
  newDiv.style.border = "0px solid #59B0FF";
  newDiv.style.padding = "0px";

  //生成层内内容
        newDiv.innerHTML = '

';  
  document.getElementById('gwc').appendChild(newDiv);


  
} 

弹出层总是绑定到id为gwc 的容器里了，如果一个页面里出现多个同id的容器你觉得浏览器如何区分呢。所以我觉得应该在js加入参数来区别各个容器。