Javascript 如何把一个覆盖变成一个巨大的按钮
我想知道如何将覆盖层变成按钮？我不想要的是一个手动按下的按钮来显示覆盖图。我想要的是，当一个人进入浏览器时，会自动出现一个覆盖，为了删除它，他们可以点击屏幕上的任何地方，它就会消失，让他们与页面本身交互 下面是覆盖层本身的代码，但我需要在其中加入什么才能使它成为一个可访问的虚拟按钮Javascript 如何把一个覆盖变成一个巨大的按钮,javascript,html,css,overlay,Javascript,Html,Css,Overlay,我想知道如何将覆盖层变成按钮？我不想要的是一个手动按下的按钮来显示覆盖图。我想要的是，当一个人进入浏览器时，会自动出现一个覆盖，为了删除它，他们可以点击屏幕上的任何地方，它就会消失，让他们与页面本身交互 下面是覆盖层本身的代码，但我需要在其中加入什么才能使它成为一个可访问的虚拟按钮 身体{ 保证金：0； 填充：0； } 部分{ 宽度：100%； 高度：650px； 背景：url（“https://static.scientificamerican.com/sciam/cache/file/7
身体{
保证金：0；
填充：0；
}
部分{
宽度：100%；
高度：650px；
背景：url（“https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png?w=590&h=800&756A88D1-C0EA-4C21-92BE0BB43C14B265”）；
背景尺寸：封面；
位置：相对位置；
溢出：隐藏；
}
.覆盖{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgb（105,105,105,9）；
}
#头衔{
填充顶部：60px；
字体大小：30px；
颜色：红色；
字体系列：“岩盐”，草书；
-webkit文本笔划：1px黑色；
}
#子文本{
字体系列：“蒙上你的恩典”，草书；
颜色：红色；
字体大小：25px；
-webkit文本笔划：.5px黑色；
}
标题
潜台词
…如果将覆盖设置为具有
位置：固定的和适当的z索引，则默认情况下它将覆盖页面
然后在其上声明一个click侦听器，将其显示设置为none，或者将其从DOM中删除
只是不要把它当作真正内容的容器
document.addEventListener（'DOMContentLoaded'，e=>{
document.querySelector（“#overlay”）.addEventListener（'click'，clickEvent=>{
clickEvent.target.classList.add（'不可见'）；
});
});
#覆盖{
位置：固定；
显示：块；
左：0；
右：0；
排名：0；
底部：0；
z指数：10000；
背景色：rgba（1001001000.5）；
填充物：4em10%；
文本对齐：居中；
字体大小：粗体；
}
#不可见{
显示：无；
}
单击我进行交互
这才是真正的内容
单击HTML主体时，可以使覆盖消失
<body onclick="document.getElementsByClassName('overlay')[0].style.display = 'none'">
...
</body>
...
您不一定需要JS:）
#覆盖{
位置：固定；
z指数：9999；
排名：0；
左：0；
底部：0；
右：0；
过渡：2s；
背景：金；
显示器：flex；
对齐项目：居中；
证明内容：中心；
能见度：可见；
}
#覆盖处理程序：选中~#覆盖{
可见性：隐藏；
不透明度：0；
}
欢迎。
单击任意位置继续
你好…
非常感谢！结果是：）虽然，我想在标题1下添加一个潜台词，虽然中断确实有帮助，但我希望有两个单独的文本，可能是标题1和标题2，但我希望它们都有不同的文本。@10你可以添加任何你想要的内容和样式，只要它们包含在标签中。
<body onclick="document.getElementsByClassName('overlay')[0].style.display = 'none'">
...
</body>