在特定圖像的區域內創建一個確認彈出框

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 }; 
} 

以獲取圖像的位置，然後顯示彈出式菜單中同樣COORDS