html - 将导航变成模态并填满整个屏幕

Question

我有一个导航，我想使用由 javascript 切换的 CSS 类将其变成模式。问题是，因为它是一个复杂的布局，我无法更改我当前拥有的 HTML 结构，因为这仅适用于使用媒体查询的移动设备。

我的想法是导航看起来是某种方式(即，没有应用模态类)，但我将集成一个将类“模态”应用于导航标签的按钮，使导航标签成为一个模态框覆盖整个屏幕。

这里是我的代码，展示了在应用了模态类的情况下导航的外观:https://jsfiddle.net/spadez/fxnzdofh/3/ .

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

这是我试过但没有给我想要的结果的代码:

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

Answer 1

Keeping the same HTML structure, how can I change the modal css to make the blue box from the very top left of the screen?

您忘记添加 top 和 left 以从 top 定位它:

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

fiddle :https://jsfiddle.net/mfjsomca/