Question

我有一个导航，我希望使用通过javascript切换的CSS类变成模态。问题是，因为它是一个复杂的布局，我无法改变我目前的HTML结构，因为这仅适用于使用mediaquery的移动设备。

这个想法是导航看起来某种方式（即，没有应用模态类）但我将集成一个按钮，它应用类＆＃34;模态＆＃34;到nav标签，将导航标签变成覆盖整个屏幕的模态框。

以下是我的代码，展示了如何使用导航并应用模态类：https://jsfiddle.net/spadez/fxnzdofh/3/。

这是我的问题/问题。保持相同的HTML结构，如何更改模态css以从屏幕的最左上方创建蓝色框，而不是在绿色标题栏下。最终结果是整个屏幕从一个角落到另一个角落。

这是我尝试的代码，但没有给我我想要的结果：

.modal {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: blue;
  z-index: 1;
}

Answer 1

保持相同的HTML结构，如何更改模态css以从屏幕的左上角创建蓝框？

您忘记添加top和left来定位top：

.modal {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: blue;
  z-index: 1;
  top: 0;
  left: 0;
}