Как отключить экран в HTML, который блокирует взаимодействие с пользователем? - PullRequest
Новая
       0

Как отключить экран в HTML, который блокирует взаимодействие с пользователем?

0 голосов
/ 12 марта 2020

Я не знаю, как именно я могу объяснить свою проблему или достаточно ли указан заголовок c. Но то, что я хочу сделать, это, например, у меня такая игра, как Ti c Ta c Toe, и если игра завершается sh, на весь экран должно появиться сообщение, которое блокирует любые другие взаимодействия, кроме кнопки. , Вот так:

enter image description here

Я думаю, что-то с display: ???

Ответы [ 3 ]

1 голос
/ 12 марта 2020

Я сделал простой пример для вас, как это можно сделать: 

<head>
<style>
.content {
color: red;
}

.overlay {
  z-index: 1;
  width:100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left:0;
  background-color:black;
  opacity: 0.8;
}

.msg {
  background-color: white;
  width: 70px;
  padding: 50px;
  font-weight: bold;
  text-align:center;
  position: absolute;
  top:40%;
  left: 45%;
}

</style>
</head>
<body>
<p class="content">some content</p>
<div class=overlay>
<p class="msg">TEST</p>
</div>
</body>
</html>

показывает черное наложение на весь экран с сообщением "TEST", вы можете добавить больше элементов, таких как кнопки, к "overlay" -div, если вы хотите.

Но имейте в виду, чтобы использовать "position: absolute;" атрибут.

Вы можете показать или скрыть его, установив атрибут "display: none" (hide) css для параметра "overlay" -div или setting "display: revert;" показать это

0 голосов
/ 12 марта 2020

Возможно, вы захотите посмотреть этот пост, Как отключить целую страницу HTML для события, как в случае JavaScript alert? Я нашел его, просто выполнив поиск по вашему вопросу на Google. Вам, вероятно, придется использовать jquery для решения.

0 голосов
/ 12 марта 2020

Вам необходимо создать полноэкранный оверлей. Ссылка: https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp Затем вы можете добавить событие Javascript, чтобы ваш тест перезапускался, когда пользователь нажимал кнопку перезапуска. Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...