Home >Web Front-end >HTML Tutorial >Position positioning within the loop_html/css_WEB-ITnose
I encountered such a problem, and I want to implement the method introduced on the page below. On the detail page of a single product, this function is implemented very well.
It depends on how your addToCart function implements the pop-up window.
弹出窗口的实现代码如下,我是参考这个链接实现的。在单个商品详细页只显示一个商品信息的时候弹出窗口的定位没问题。但是在分类商品的列表页当列出多个商品“加入购物篮”时(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 = '
The pop-up layer is always bound to the one with the id of gwc In the container, if there are multiple containers with the same ID on a page, how do you think the browser can distinguish them? So I think we should add parameters to js to distinguish each container.