Javascript 将url复制到剪贴板后显示成功消息

将url复制到剪贴板后，我正试图显示一条消息（即“已复制！）。请帮助我如何继续

我从stackoverflow和codepen:，以及更多方面研究了这一点

function copy（）{var e=document.getElementById（“box”）；e.value=window.location.href，e.focus（），e.select（），document.getElementById（“ctooltip”）.style.display=“inline”，document.execCommand（“copy”），setTimeout（function（）{document.getElementById（“ctooltip”）.style.display=“none”}，2000）

.copybutton{背景色：透明；边框：0；轮廓：0；光标：指针；不透明度：1；位置：绝对值}.btooltip{显示：flex；对齐项目：中心；边距顶部：6px；最小高度：30px}CTOLTIP{显示：无；字体大小：20px；左边距：0；填充：3px 8px；背景：线性渐变（45度，#2e23ac 0，#ee71f9 100%）；边界半径：24px；颜色：#fff；z索引：1；位置：相对}。视觉隐藏{位置：绝对；剪辑：rect（1px，1px，1px）}

---

✓将
警报添加到您的复制功能中

function copy(){
  var Url = document.getElementById("box");
  Url.value = window.location.href;
  Url.focus();
  Url.select();  
  document.execCommand("copy");
  alert("Copied!");
}


函数复制（）{
var Url=document.getElementById（“框”）；
Url.value=window.location.href；
Url.focus（）；
Url.select（）；
文件。执行命令（“副本”）；
警报（“复制！”）；
}
.visuallyhidden{
位置：绝对位置；
剪辑：rect（1px，1px，1px，1px）
}
.复制按钮{
背景色：#fff；
边界：0；
大纲：0；
光标：指针；
不透明度：1；
位置：绝对位置；
右：50px；
宽度：40px；
高度：40px；
z指数：9；
边界半径：24px
}
我为show“复制！“信息：


函数复制（）{
var Url=document.getElementById（“框”）；
Url.value=window.location.href；
Url.focus（）；
Url.select（）；
document.getElementById（“自定义工具提示”）.style.display=“内联”；
文件。执行命令（“副本”）；
setTimeout（函数（）{
document.getElementById（“自定义工具提示”）.style.display=“无”；
}, 1000);
}；
.visuallyhidden{位置：绝对；剪辑：rect（1px，1px，1px，1px）}
.copybutton{背景色：#fff；边框：0；轮廓：0；光标：指针；不透明度：1；位置：绝对值；宽度：40px；高度：40px；z索引：9；边框半径：24px}
.按钮工具提示容器{
显示器：flex；
对齐项目：居中；
边缘顶部：16px；
最小高度：30px；
}
#自定义工具提示{
显示：无；
左边距：40px；
填充物：5px12px；
背景色：#000000 DF；
边界半径：4px；
颜色：#fff；
}

收到了！
在何处显示消息？（1）作为覆盖svg的工具提示，或（2）作为替换svg的单词，或（3）还有其他更好的方法吗。它只需添加很少的内容即可工作。：-D谢谢！只添加了
警报
函数调用。这是你想要的吗？问题是显示成功消息。就是这样。它很光滑，而且有效！我也会使用它。谢谢你，Ramin！Ramin，在你的上述解决方案中，是否可以删除ID，但得到相同的结果？让我们来看看说我们是否要缩放它？我们可以使用类名吗？@NickDimou添加类名并使用
document.querySelector（“.custom tooltip”）；
。如果我的答案是正确的，请打绿色勾。非常感谢您的友好回复！我已经尝试过了，效果很好！现在我可以缩放它，我感谢您的努力。