Question

我已经使用this在线编辑器创建了工作的CSS模态，并在THREE.js画布上覆盖了按钮。

我最近在我的台式机Mac上下载了Brackets，尽管我对这种东西不满意，但大多数事情都进展顺利，但现在我正尝试从Brackets中做几乎相同的事情。它不位于顶部！它只是将THREE.js画布下推。我尝试了几种方法来解决此问题，但似乎没有任何作用。可能我使用的编辑器不正确吗？

我将在游戏中的暂停菜单中使用该模式，因此我将对角落中的一个不透明的小暂停按钮使用相同的技术。

这是我的CSS：

#modal {
  z-index: 1;
  position: fixed;
  background-color: rgba(0, 0, 0, 0);
  color: white;
  width: 100%;
  height: 100%;
}
#modal_content {
  margin-top: 50px;
  margin-left: 50px;
  width: 1000px;
  height: 1000px;
  background-color: rgba(0, 0, 0, 0);
  font-size: 50px;
}

和HTML：

<div id="modal">
  <div id="modal_content">
    <p>Stuff</p>
  </div>
</div>

我宁愿将模式保留为HTML，CSS和Javascript，但如果有一种简单的方法可以用另一种语言实现此目标，请告诉我。

任何帮助都将不胜感激。

Answer 1

您的代码似乎正常。这似乎是实现模态的一种完全适当的方法。由于不透明度为0，很难看到它起作用了，这个答案确实无法解决您的实际问题，但希望此摘要显示该问题在其他地方。您可以添加更多说明问题的HTML和CSS代码吗？

#modal {
  z-index: 1;
  position: fixed;
  background-color: rgba(0, 0, 0, .5);
  color: white;
  width: 100%;
  height: 100%;
}

#modal_content {
  margin-top: 50px;
  margin-left: 50px;
  width: 1000px;
  height: 1000px;
  background-color: rgba(0, 0, 0, .5);
  font-size: 50px;
}

canvas {
  width: 100%;
  height: 100%;
  background: red;
}

<div id="modal">
  <div id="modal_content">
    <p>Stuff</p>
  </div>
</div>

<canvas></canvas>

CSS模态不会放在首位

1 个答案: