为了账号安全,请及时绑定邮箱和手机立即绑定

如何禁用 HTML 中阻止用户交互的屏幕?

如何禁用 HTML 中阻止用户交互的屏幕?

PIPIONE 2023-09-04 16:04:03
我不知道如何准确解释我的问题,也不知道标题是否足够具体。但我想做的是,例如,我有一个像 Tic Tac Toe 这样的游戏,如果游戏完成,整个屏幕上应该弹出一条消息,该消息会阻止除只有一个按钮之外的任何其他交互。像那样:我认为与display: ???
查看完整描述

2 回答

?
白衣非少年

TA贡献1155条经验 获得超0个赞

我为您做了一个简单的例子:


<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”消息,如果需要,您可以将更多项目(例如按钮)添加到“覆盖层”-div 中。


但请记住,要使用“位置:绝对;” 属性。


您可以通过将“display: none”(隐藏)CSS 属性设置为“overlay”-div 或设置“display: revert;”来显示或隐藏它。展示它


查看完整回答
反对 回复 2023-09-04
?
慕容森

TA贡献1853条经验 获得超18个赞

您需要创建全屏覆盖。 然后您可以添加一个 Javascript 事件,以便当用户单击重新启动按钮时重新启动您的测验。希望这可以帮助!



查看完整回答
反对 回复 2023-09-04
  • 2 回答
  • 0 关注
  • 118 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信