[英]Move the dialog box popup in the picture center
单击图片时,我正在创建弹出对话框。 现在我的问题是当下图显示的弹出对话框时,实际上我想在图片中心放置一个弹出对话框。
以下是我的原始编码:
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 结果如下:
希望有人能指导我解决这个问题。 谢谢。
如果您的图像具有固定高度,您可以简单地添加负边距以将它们“拉”该像素数。
注意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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.