将导航转换为模态，并填充整个屏幕

我有一个导航，我想变成使用JavaScript切换CSS类的模态。事情是，因为它是一个复杂的布局，我不能改变我目前的HTML结构，因为这只适用于使用mediaquery的手机。将导航转换为模态，并填充整个屏幕

这个想法是，导航看起来是某种方式（即，没有模态类应用），但我会集成一个按钮，将类“模态”应用到导航标记，使导航标记进入模态框它覆盖整个屏幕。

这里是我的代码，展示它将如何与应用模态类的导航：https://jsfiddle.net/spadez/fxnzdofh/3/。

这是我的问题/问题。保持相同的HTML结构，我怎样才能改变模式的CSS来从屏幕的最左上方创建蓝色框，而不是在绿色标题栏下。最终的结果是整个屏幕从一个角落到另一个角落。

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

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

2016-02-04 Jimmy

保持相同的HTML结构，我怎么可以改变模式的CSS使蓝盒子从屏幕的最左上方？

你忘了添加top和left将其从top的位置：

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

2016-02-04 10:19:31

回答