在特定图像区域内创建确认弹出窗口

Question

我的页面上有多个图像，当用户上传图像时，这些图像会在div中动态创建。每个图像都有其唯一的父div。当用户想要删除图像时，我想要在特定div的范围内删除确认（不是超过全身），这是我目前无法实现的。目前我确实喜欢这个 - 。

我想在此特定图片上显示此弹出消息，如下所示：

感谢。

Answer 1

通过使用JavaScript，我们可以实现它。

 HTML Structure
        <div class="img-wrapper">
            <img src="/image.png">
            <span class="edit" onclick="myFunction();">edit</span>
           <div class="popup-option"></div> 
        </div>

JavaScript function 
       function  myFunction(id){
        var htm = "<div class='popup'>"+
                  "<button>Delete</button>"+
                  "<button>Cancel</button>"+
                  "</div>";
           $('.popup-option').append(htm);    

       }

    CSS
    .img-wrapper{  /* make main wrapper position relative and add your style */
       position: relative;
     }
    .popup{ /* popup will cover full width of that particular item*/
     position : absolute;
     left: 0;
     right:0;
     width :100%;
     height:100%;
     z-index: 999;
     background:rgba(0,0,0,.8);
     }

Answer 2

尝试类似

的内容

function getPosition(element) {
var xPosition = 0;
var yPosition = 0;

while(element) {
    xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
    yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
    element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}

要获取图像的位置，然后显示弹出相同的坐标