Как превратить наложение в гигантскую кнопку - PullRequest
Новая
       8

Как превратить наложение в гигантскую кнопку

2 голосов
/ 04 апреля 2020

Мне было интересно, как превратить оверлей в кнопку? Чего я не хочу, так это кнопки, которую нажимают вручную, чтобы показать наложение. То, что я хотел бы автоматически, когда кто-то входит в браузер, там есть оверлей, и чтобы удалить его, он может щелкнуть в любом месте экрана, и он исчезнет, ​​позволяя им взаимодействовать с самой страницей.

Ниже это код самого наложения, но что мне нужно включить в него, чтобы сделать его доступной воображаемой кнопкой?

... 

<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>

...

Ответы [ 3 ]

2 голосов
/ 04 апреля 2020

Вам не обязательно нужно 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>
0 голосов
/ 04 апреля 2020

Наложение может исчезнуть при нажатии на тело HTML. 

<body onclick="document.getElementsByClassName('overlay')[0].style.display = 'none'">
...
</body>
0 голосов
/ 04 апреля 2020

Если вы установите оверлей на 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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...