Javascript HTML和CSS弹出卡

我正在用Electron创建一个Web浏览器，我需要帮助创建一个弹出卡。我到处找这样的东西，但什么也找不到

我需要创建的弹出窗口与提供的图像类似。类似于chrome扩展弹出框（最好是chrome连接弹出框），它们将用于创建连接弹出框、扩展弹出框等

Chrome连接弹出窗口

Visual Studio代码编辑器弹出窗口

以下是弹出卡的示例代码

---

测试代码片段

---

将HTML代码另存为index.HTML

将CSS代码另存为style.CSS

注意-CSS文件名应与您在html中使用的内容相匹配*

*i、 e.link rel=“stylesheet”href=“style.css”

*，
*：：之后，
*：：之前{
保证金：0；
填充：0；
框大小：边框框；
}
html{
字体大小：62.5%；
}
身体{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
字体系列：-apple system、BlinkMacSystemFont、“Segoe UI”、“开放式SAN”、“无衬线”；
最小高度：100vh；
}
A.
a:链接{
字体家族：继承；
文字装饰：无；
}
.集装箱{
位置：固定；
排名：0；
左：0；
z指数：10；
显示：无；
证明内容：中心；
对齐项目：居中；
宽度：100%；
身高：100%；
}
.容器：目标{
显示器：flex；
}
.莫代尔{
宽度：60雷姆；
填充：4rem2rem；
边界半径：.8rem；
颜色：hsl（0,0,100%）；
背景：线性梯度（至右下，#009FFF，#ec2F4B）；
盒影：4rem.4rem 2.4rem.2rem hsla（236，50%，50%，0.3）；
位置：相对位置；
溢出：隐藏；
}
.详情{
文本对齐：居中；
边缘底部：4rem；
垫底：4rem；
边框底部：1px实心hsla（0,0%，100%，0.4）；
}
.头衔{
字号：3.2rem；
}
.说明{
边缘顶端：2rem；
字体大小：1.6rem；
字体：斜体；
}
.txt{
填充：0 4rem；
边缘底部：4rem；
字体大小：1.6rem；
线高：2；
}
.txt:：之前{
内容：''；
位置：绝对位置；
最高：0%；
左：100%；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
宽度：18rem；
身高：18雷姆；
边框：1px实心hsla（0,0%，100%，0.2）；
边界半径：100雷姆；
指针事件：无；
}
.btn{
填充：1雷姆1.6雷姆；
边框：1px实心hsla（0,0%，100%，0.4）；
边界半径：100雷姆；
颜色：继承；
背景：透明；
字体大小：1.4rem；
字体家族：继承；
字母间距：.2em；
过渡：.2s；
光标：指针；
}
.btn:悬停，
.btn:焦点{
边框颜色：hsla（0,0%，100%，0.6）；
-webkit转换：translateY（-.2rem）；
变换：translateY（-.2rem）；
}
.link-1{
字体大小：1.8rem；
颜色：hsl（0,0,100%）；
背景：线性梯度（至右下，#009FFF，#ec2F4B）；
盒影：4rem.4rem 2.4rem.2rem hsla（236，50%，50%，0.3）；
边界半径：100雷姆；
填充：1.4rem 3.2rem；
过渡：.2s；
}
.link-1：悬停，
.link-1：焦点{
-webkit转换：translateY（-.2rem）；
变换：translateY（-.2rem）；
盒状阴影：0.04.4rem.2rem hsla（236,50%，50%，0.4）；
}
.link-2{
宽度：4rem；
身高：4rem；
边框：1px实心hsla（0,0%，100%，0.4）；
边界半径：100雷姆；
颜色：继承；
字号：2.2rem；
位置：绝对位置；
顶部：2rem；
右：2rem；
显示器：flex；
证明内容：中心；
对齐项目：居中；
过渡：.2s；
}
.link-2：：之前{
内容：“×”；
-webkit转换：translateY（-.1rem）；
变换：translateY（-.1rem）；
}
.link-2：悬停，
.link-2：焦点{
边框颜色：hsla（0,0%，100%，0.6）；
-webkit转换：translateY（-.2rem）；
变换：translateY（-.2rem）；
}
----------

弹出卡
你的头衔
标语将出现在这里
一些xyz一些xyz一些xyz一些xyz一些xyz一些xyz一些xyz一些xyz一些xyz一些xyz一些xyz一些xyz
一些xyz一些xyz一些xyz一些xyz一些xyz一些xyz一些xyz一些xyz一些xyz
按钮&rarr；

您必须创建一个模式弹出窗口。这可以是默认情况下隐藏的div，但在单击或将鼠标悬停在另一个元素上时显示

它需要有

绝对

定位，并且您需要根据

事件

属性

clientY

和

clientX

分别更新

顶部

和

左侧

样式属性

const modalTooltip=document.querySelector（“#模态工具提示”）；
常量showModal=（{clientX，clientY}）=>{
assign（modalTooltip.style，{top:`${clientY}px`，left:`${clientX}px`}）；
modalTooltip.classList.add（'tooltip-visible'）；
};
常量hideModal=（）=>{
modalTooltip.classList.remove（'tooltip-visible'）；
};
document.querySelector（“.site info”）.addEventListener（'click'，showmodel）；
modalTooltip.querySelector（'.tooltip close'）.addEventListener（'click'，HideMoal）
正文{
背景：#222；
颜色：#DDD；
}
.演示{
显示器：flex；
弯曲方向：行；
对齐项目：居中；
}
.演示帮助{
字体大小：粗体；
左边距：1米；
}
.网站信息{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：3em；
高度：3em；
背景:#666；
边框：薄实线#555；
边界半径：50%；
}
.网站信息{
颜色：#DDD；
光标：指针；
}
.工具提示{
位置：绝对位置；
排名：0；
左：0；
z指数：100；
显示：无；
弯曲方向：立柱；
背景：#4E4C46；
颜色：#EEE；
边框：薄实线#222；
边界半径：0.2米；
盒影：2p3p5pRGBA（0,0,0,0.5）；
字体系列：“Roboto”，无衬线；
字体大小：较小；
}
.tooltip.tooltip-visible{
显示器：flex；
}
.工具提示标题{
显示器：flex；
弯曲方向：行；
边缘底部：0.5em；
对齐项目：顶部；
}
.工具提示关闭{
光标：指针；
}
.工具提示关闭：悬停{
颜色：#FFF；
}
.工具提示顶部，.工具提示底部{
显示器：flex；
弯曲方向：立柱；
填充：0.5em；