improve popout presentation

css/main.css

@@ -137,18 +137,31 @@ body.unsupported #gamepad {
     max-width: 200px;
 }
 
-#help-popout {
+.popout {
+    background: rgba(0, 0, 0, 0.5);
+    display: none;
+    height: 100vh;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100vw;
+}
+
+.popout.active {
+    display: block;
+}
+
+.popout .content {
     background: whitesmoke;
     border: 1px solid rgba(0, 0, 0, 0.2);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
     box-sizing: border-box;
     color: black;
-    display: none;
     font-size: 0.9em;
     left: 50%;
-    min-width: 400px;
+    max-height: 90vh;
-    width: 600px;
+    max-width: 90vw;
-    max-height: 100vh;
+    min-width: 600px;
     overflow-y: auto;
     padding: 20px;
     position: absolute;
@@ -156,43 +169,50 @@ body.unsupported #gamepad {
     transform: translate(-50%, -50%);
 }
 
-#help-popout.active {
+.popout .close {
-    display: block;
+    background: none;
+    border: none;
+    color: black;
+    cursor: pointer;
+    font-size: 1.5em;
+    position: absolute;
+    right: 20px;
+    top: 20px;
 }
 
-#help-popout h2 {
+.popout h2 {
     margin-bottom: 1.5em;
     margin-top: 0;
 }
 
-#help-popout h3 {
+.popout h3 {
     margin-top: 1.5em;
 }
 
-#help-popout p:last-child {
+.popout p:last-child {
     margin-bottom: 0;
 }
 
-#help-popout table {
+.popout table {
     border-collapse: collapse;
     border-spacing: 0;
     max-width: 100%;
     width: 100%;
 }
 
-#help-popout th {
+.popout th {
     text-align: left;
 }
 
-#help-popout th,
+.popout th,
-#help-popout td {
+.popout td {
     border-top: 1px solid #ddd;
     line-height: 1.42857143;
     padding: 8px;
     vertical-align: top;
 }
 
-#help-popout table > thead > tr > th {
+.popout table > thead > tr > th {
     border-bottom: 2px solid #ddd;
     border-top: 0;
     vertical-align: bottom;

index.html

@@ -127,11 +127,15 @@
 			</select>
 		</span>
 	</div>
-	<div id="help-popout">
+	<div id="help" class="popout">
+		<div class="content">
+			<div class="close">✕</div>
+
 			<h2>Help</h2>
 
 			<h3>Instructions</h3>
-		<p>Press and hold any of your gamepad buttons for at least 1 second. If your gamepad is supported, it shows up.
+			<p>Press and hold any of your gamepad buttons for at least 1 second. If your gamepad is supported, it shows
+				up.
 			</p>
 
 			<h3>Detected Controllers</h3>
@@ -207,6 +211,7 @@
 			<p>DualShock 4 and Xbox One skins from <a target="_blank"
 					href="https://gamepadviewer.com/">gamepadviewer.com</a>.</p>
 		</div>
+	</div>
 
 	<script src="js/jquery.min.js"></script>
 	<script src="js/gamepad.js"></script>

js/gamepad.js

@@ -21,7 +21,8 @@ class Gamepad {
         this.$colorSelect = this.$colorOverlay.find('select[name=color]');
         this.$triggersOverlay = this.$overlay.find('#triggers');
         this.$triggersSelect = this.$triggersOverlay.find('select[name=triggers]');
-        this.$helpPopout = $('#help-popout');
+        this.$helpPopout = $('#help.popout');
+        this.$helpPopoutClose = this.$helpPopout.find('.close');
         this.$gamepadList = $('#gamepad-list');
 
         // ensure the GamePad API is available on this browser
@@ -178,6 +179,9 @@ class Gamepad {
 
         // by default, enqueue a delayed display of the placeholder animation
         this.displayPlaceholder();
+
+        // listen for keyboard events
+        this.$helpPopoutClose.on('click', this.toggleHelp.bind(this));
     }
 
     /**
@@ -1080,7 +1084,7 @@ class Gamepad {
      * Toggles the on-screen help message
      */
     toggleHelp() {
-        // refresh gamepad lsit with latest data
+        // refresh gamepad list with latest data
         this.pollGamepads();
         this.buildHelpGamepadList();