Javascript 在图片中心移动对话框弹出窗口

单击图片时，我正在创建弹出对话框。现在我的问题是，当弹出对话框如下图所示时，实际上我想在图片中心放置一个弹出对话框

以下是我的原始编码：

函数showpopup（）{
让tooltip=document.getElementById（“tooltiptext”）；
让可见=tooltip.style.display；
如果（可见=“无”）{
document.getElementById（“tooltiptext”）.style.display=“block”；
}否则{
document.getElementById（“tooltiptext”）.style.display=“无”；
}
}

。工具提示{
显示：块；
背景：黑色；
边界半径：5px；
最大宽度：300px；
宽度：300px；
位置：绝对位置；
填充：12px 18px；
字体系列：打开sans-regular、sans-serif；
字体大小：14px；
颜色：白色；
线高：22px；
框大小：边框框；
z指数：1000；
大纲：无；
}
.tooltip.bottom.arrow{
排名：0；
左：50%；
边界顶部：无；
边框底部：10px纯黑；
}
.工具提示.箭头{
宽度：0；
身高：0；
位置：绝对位置；
左：50%；
左边框：10px实心透明；
右边框：10px实心透明；
边框顶部：10px实心#43b02a；
利润上限：-10px；
左边距：-10px；
}

简短解释

如果图像的高度固定，只需添加一个负边距，即可将其“拉”到该像素数

注意

页边距顶部-100px在下面的代码段中


函数showpopup（）{
让tooltip=document.getElementById（“tooltiptext”）；
让可见=tooltip.style.display；
如果（可见=“无”）{
document.getElementById（“tooltiptext”）.style.display=“block”；
}否则{
document.getElementById（“tooltiptext”）.style.display=“无”；
}
}
。工具提示{
利润上限：-100px；
显示：块；
背景：黑色；
边界半径：5px；
最大宽度：300px；
宽度：300px；
位置：绝对位置；
填充：12px 18px；
字体系列：打开sans-regular、sans-serif；
字体大小：14px；
颜色：白色；
线高：22px；
框大小：边框框；
z指数：1000；
大纲：无；
}
.tooltip.bottom.arrow{
排名：0；
左：50%；
边界顶部：无；
边框底部：10px纯黑；
}
.工具提示.箭头{
宽度：0；
身高：0；
位置：绝对位置；
左：50%；
左边框：10px实心透明；
右边框：10px实心透明；
边框顶部：10px实心#43b02a；
利润上限：-10px；
左边距：-10px；
}

简短解释