移動圖片中心彈出對話框

Question

單擊圖片時，我正在創建彈出對話框。 現在我的問題是當下圖顯示的彈出對話框時，實際上我想在圖片中心放置一個彈出對話框。

以下是我的原始編碼：

 function showpopup() { let tooltip = document.getElementById("tooltiptext"); let visible = tooltip.style.display; if (visible == "none") { document.getElementById("tooltiptext").style.display = "block"; } else { document.getElementById("tooltiptext").style.display = "none"; } }

 .tooltip { display: block; background: black; border-radius: 5px; max-width: 300px; width: 300px; position: absolute; padding: 12px 18px; font-family: open-sans-regular, sans-serif; font-size: 14px; color: white; line-height: 22px; box-sizing: border-box; z-index: 1000; outline: none; }.tooltip.bottom.arrow { top: 0; left: 50%; border-top: none; border-bottom: 10px solid black; }.tooltip.arrow { width: 0; height: 0; position: absolute; left: 50%; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #43b02a; margin-top: -10px; margin-left: -10px; }

 <img width="200" height="200" src="http://i.stack.imgur.com/o2hxa.png" onclick="showpopup()"></img> <div id="tooltiptext" class="bottom tooltip" style="display: none;"> <div class="arrow"> </div> LMS short explanation </div>

實際上我想要預期的 output 結果如下：

希望有人能指導我解決這個問題。 謝謝。

Answer 1

如果您的圖像具有固定高度，您可以簡單地添加負邊距以將它們“拉”該像素數。

注意margin-top -100px; 在下面的代碼段中。

 function showpopup() { let tooltip = document.getElementById("tooltiptext"); let visible = tooltip.style.display; if (visible == "none") { document.getElementById("tooltiptext").style.display = "block"; } else { document.getElementById("tooltiptext").style.display = "none"; } }

 .tooltip { margin-top: -100px; display: block; background: black; border-radius: 5px; max-width: 300px; width: 300px; position: absolute; padding: 12px 18px; font-family: open-sans-regular, sans-serif; font-size: 14px; color: white; line-height: 22px; box-sizing: border-box; z-index: 1000; outline: none; }.tooltip.bottom.arrow { top: 0; left: 50%; border-top: none; border-bottom: 10px solid black; }.tooltip.arrow { width: 0; height: 0; position: absolute; left: 50%; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #43b02a; margin-top: -10px; margin-left: -10px; }

 <img width="200" height="200" src="http://i.stack.imgur.com/o2hxa.png" onclick="showpopup()"></img> <div id="tooltiptext" class="bottom tooltip" style="display: none;"> <div class="arrow"> </div> LMS short explanation </div>