Table of Contents
Does anyone know? ? ?
Home Web Front-end HTML Tutorial Position positioning within the loop_html/css_WEB-ITnose

Position positioning within the loop_html/css_WEB-ITnose

Jun 24, 2016 pm 12:19 PM

This post was last edited by wangruixi on 2013-03-16 17:04:34

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.
http://hi.baidu.com/gyfcw/item/5193c2f357586c1f84d278d9

But here comes the problem. On the classified product list page, multiple products are displayed in a circular list; each product display includes an "Add to Cart" button. My purpose is to click the "Add to Cart" button of any product to pop up a confirmation window in the corresponding location. But no matter which product I add to the list, the pop-up window appears at the position of the first product, which means that all pop-up windows seem to have the first product as the parent element.

Please give me some advice, thank you!


...
                                                 > //The pop-up window contains the position:absolute attribute
                                                                                                                                                                     $lang.btn_buy}" style="margin:4px auto;"/>

                                               foreach}-->

Reply to discussion (solution)

Does anyone know? ? ?

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 = '

';
  newDiv.innerHTML += '
 该商品已成功放入购物车
'+cartinfo +'
<<继续购物  
';
document.getElementById('gwc').appendChild(newDiv);



}

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.

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Is HTML easy to learn for beginners? Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

What is an example of a starting tag in HTML? What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Apr 04, 2025 pm 11:54 PM

GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? Apr 05, 2025 am 06:15 AM

To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...

HTML, CSS, and JavaScript: Essential Tools for Web Developers HTML, CSS, and JavaScript: Essential Tools for Web Developers Apr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

How to implement adaptive layout of Y-axis position in web annotation? How to implement adaptive layout of Y-axis position in web annotation? Apr 04, 2025 pm 11:30 PM

The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...

See all articles