將導航轉換爲模態，並填充整個屏幕

我有一個導航，我想變成使用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

回答