Javascript 带有按钮的透明弹出/覆盖（JQuery、CSS）

我有一个html网站，我想在我的主页上看到一个透明的覆盖/弹出按钮，就像我上传的图片一样。按其中一个按钮重定向到特定url。如何创建此弹出窗口？它应该是通用的，因此我不需要改变我的html结构，而且我可以通过绑定这个JQuery/CSS将它用于不同的网站

我的素描：

---

我写了一个例子来说明这一点。您可以使用

rgba

将alpha（或透明度）添加到颜色中

$（“正文”）.append(`

例1
例2
例3
例4

`)

正文{
保证金：0；
填充：0；
}
.弹出窗口{
位置：固定；
排名：0；
左：0；
z指数：1；
宽度：100%；
身高：100%；
背景：rgba（77,77,77,4）；
}
.popup>ul{
列表样式类型：无；
填充：0；
保证金：0；
位置：绝对位置；
最高：50%；
宽度：100%；
转化：translateY（-50%）；
}
.popup>ul>li{
背景：绿色；
显示：内联块；
颜色：黑色；
边框：2件纯黑；
宽度：计算（25%-8px）；
}

---

在按钮的包装元件上使用

位置：固定的

或

位置：绝对的

。如果您不定义背景，它将是透明的（不确定旧浏览器）@Morpheus我应该用canvas/css绘制这个弹出窗口吗？或者我需要用jquery创建HTML元素吗？这个覆盖/弹出窗口应该通过绑定jquery+css来工作。你有一个合适的例子吗？这里有一个快速的例子@Morpheus谢谢。我将尝试扩展它，使其与我的图片一样。由于缺乏经验，我不确定我是否能做这件事。但你的例子会让我走得更远。谢谢！我不能直接更改我的html站点，但我可以用JQeury创建这个新的div和li按钮，对吗？js事件处理程序能否处理js生成的li元素？如果你能用JQuery扩展你的例子，那就太好了！（为它生成div+事件处理程序）@MeteorNewbie这就是你的意思吗？

$（.popup”）.click（函数（）{alert（.click（）调用的处理程序）；}）