如何将叠加层变成一个巨大的按钮

Question

我想知道如何将叠加层变成按钮？我不想要的是一个手动按下以显示覆盖层的按钮。我想要的是当一个人进入浏览器时自动出现一个叠加层，为了将其删除，他们可以单击屏幕上的任意位置，它就会消失，让他们与页面本身进行交互。

下面是叠加层本身的代码，但我需要将什么合并到其中才能使其成为一个可访问的假想按钮？

...

<style>
body {
margin: 0;
padding: 0;
}

section {
width: 100%;
height: 650px;
background: url("https://static.scientificamerican.com/sciam/cache/file/7A715AD8-449D-4B5A-ABA2C5D92D9B5A21_source.png?w=590&h=800&756A88D1-C0EA-4C21-92BE0BB43C14B265");
background-size: cover;
position: relative;
overflow: hidden;
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(105, 105, 105, .9); 
}

#Title {
padding-top: 60px;
font-size: 30px;
color: red;
font-family: 'Rock Salt', cursive;
-webkit-text-stroke: 1px black;
}

#sub-text {
font-family: 'Covered By Your Grace', cursive;
color: red;
font-size: 25px;
-webkit-text-stroke: .5px black;
}

</style>
</head>
<body>
<section>
<div class = "overlay">
<div id = "Title">
<h1 align = "center"> Title </h1>
</div>
<div id = "sub-text">
<h2 align = "center">Subtext</h2>
</div>
</div>
</section>
</body>
</html>

...

Answer 1

如果您将叠加层设置为具有 position: fixed 和适当的 z-index，它会默认覆盖页面。

然后在其上声明一个点击侦听器，以将其显示设置为 none 或将其从 DOM 中移除。

只是不要将其用作真实内容的容器

document.addEventListener('DOMContentLoaded', e => {
  document.querySelector('#overlay').addEventListener('click', clickEvent => {
    clickEvent.target.classList.add('invisible');
  });
});

#overlay {
  position: fixed;
  display: block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10000;
  background-color: rgba(100, 100, 100, 0.5);
  padding: 4em 10%;
  text-align: center;
  font-weight: bold;
}

#overlay.invisible {
  display: none;
}

<div id="overlay">
  Click me to interact
</div>
<div>
  This is the real content <a href="">But you can't click me without closing the overlay</a>

</div>

Answer 2

您可以在单击 HTML 的正文时使叠加层消失。

<body onclick="document.getElementsByClassName('overlay')[0].style.display = 'none'">
...
</body>

Answer 3

你不一定需要 JS :)

#overlay {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  transition: 2s;
  background: gold;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: visible;
}
#overlay-handler:checked ~ #overlay {
  visibility: hidden;
  opacity: 0;
}

<input id="overlay-handler" type="radio" hidden>
<label for="overlay-handler" id="overlay">
  <h2>WELCOME.<br>Click anywhere to continue</h2>
</label>
<h1>Hi there...</h1>

如何将叠加层变成一个巨大的按钮

How to turn an overlay into a giant button

html

javascript

css

overlay