时间戳

首页 > 解决方案 > 打开列表项作为新的覆盖

javascript - 打开列表项作为新的覆盖

问题描述

我正在尝试创建一个列表，单击其中的每个项目都会打开一个新的叠加层，并带有自己的叠加层文本。

这是迄今为止我尝试过的JSFiddle，但它不起作用。理想情况下，点击A会打开一个半透明的覆盖在屏幕上Overlay Text - A的文本。

我使用W3CSchools 的Overlay 示例作为我的灵感。

我已经用 HTML、CSS、Javascript 编码总共 3 天了，并试图尽可能多地弄清楚东西。因此，如果您发现一些明显的错误或糟糕的编码风格，请向我指出，我会尽力确保我遵循您的指示。

谢谢！

标签： javascripthtmlcss

解决方案

这是一个工作小提琴：

https://jsfiddle.net/kelvinsusername/xr0ed6ft/

我更改了一些 js（使用 getElementById 而不是 getElementByClass <- 我想你会使用 getElementsByClass 来返回一个集合？）：

document.getElementById("overlay").style.display = "block";

并将 html 重构为具有单个叠加层，因此 onclick 不会嵌套 - 将 onclick 嵌套在另一个具有 onclick 的元素内意味着两者都将运行（除非您停止事件传播）

推荐阅读