Start modal

src/App.css

@@ -21,3 +21,30 @@
   position: absolute;
   background: white;
 }
+
+.overlay {
+  /* recommendation:
+     don't focus on the number "1000" here, but rather,
+     you should have a documented system for z-index and 
+     follow that system. This number should be pretty
+     high on the scale in that system.
+  */
+  z-index: 1000;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.9);
+}
+
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: red;
+  width: 600px;
+  max-width: 100%;
+}

src/App.js

@@ -2,6 +2,7 @@ import React from "react";
 import skins from "./skins.json";
 import "./App.css";
 import LoadQueue from "./LoadQueue";
+import { Overlay } from "./Overlay";
 
 const hashes = Object.keys(skins);
 
@@ -213,13 +214,18 @@ class App extends React.Component {
       );
     }
     return (
-      <div
-        style={{
-          height: Math.ceil(hashes.length / columnCount) * SKIN_HEIGHT,
-          position: "relative"
-        }}
-      >
-        {skinElements}
+      <div>
+        <div
+          style={{
+            height: Math.ceil(hashes.length / columnCount) * SKIN_HEIGHT,
+            position: "relative"
+          }}
+        >
+          {skinElements}
+        </div>
+        <Overlay>
+          <h1>Hello</h1>
+        </Overlay>
       </div>
     );
   }