猿问

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

我不知道如何准确解释我的问题，也不知道标题是否足够具体。但我想做的是，例如，我有一个像 Tic Tac Toe 这样的游戏，如果游戏完成，整个屏幕上应该弹出一条消息，该消息会阻止除只有一个按钮之外的任何其他交互。像那样：


我认为与display: ???



PIPIONE
浏览 119回答 2
2回答

白衣非少年

我为您做了一个简单的例子：<head><style>.content {color: red;}.overlay {&nbsp; z-index: 1;&nbsp; width:100vw;&nbsp; height: 100vh;&nbsp; position: absolute;&nbsp; top: 0;&nbsp; left:0;&nbsp; background-color:black;&nbsp; opacity: 0.8;}.msg {&nbsp; background-color: white;&nbsp; width: 70px;&nbsp; padding: 50px;&nbsp; font-weight: bold;&nbsp; text-align:center;&nbsp; position: absolute;&nbsp; top:40%;&nbsp; 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;”来显示或隐藏它。展示它
0

慕容森

您需要创建全屏覆盖。 然后您可以添加一个 Javascript 事件，以便当用户单击重新启动按钮时重新启动您的测验。希望这可以帮助！
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答