建立浮起來的頁面

示意圖

這幾天在做 side project 的時候，發現自己沒有做過這種浮空的頁面，紀錄一下自己是怎麼做的。

流程

1. 為了讓浮空頁面背後的背景變暗，我自己用的方法是用一個半透明 div 蓋在畫面上，讓整個畫面變暗

.darker {
  position: fixed; /* 讓 div 固定在畫面的 top:0, left: 0 */
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 10;
}

2. 同樣用 position: fixed，建立一個能夠保持在畫面中間的頁面，這樣基本上就完成了。

.page {
  position: fixed;
  width: 80%;
  max-height: 90vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}

— Jun 3, 2022