Make modals closeable

html_generator.php

@@ -154,7 +154,7 @@
 			$modal_html =
 				"<div id=\"modal_" . $id . "\" class=\"qr-code-modal\">" . PHP_EOL .
 				"	<div class=\"qr-code-modal-content\">" . PHP_EOL .
-				"		<span class=\"qr-code-modal-close\">&times;</span>" . PHP_EOL .
+				"		<span class=\"qr-code-modal-close\" onclick=\"hideQRModal('" . $id . "')\">&times;</span>" . PHP_EOL .
 				"		" . $img_elem . PHP_EOL .
 				"	</div>" . PHP_EOL .
 				"</div>" . PHP_EOL;

output/script.js

@@ -11,6 +11,12 @@ function displayQRModal(communityID) {
 	modal.style.display = "block";
 }
 
+function hideQRModal(communityID) {
+	var modalID = "modal_" + communityID;
+	modal = document.getElementById(modalID);
+	modal.style.display = "none";
+}
+
 function createJoinLinkButtons() {
 	elements = document.getElementsByClassName("td_join_url");
 	Array.from(elements).forEach((td_element) => {

output/styles.css

@@ -47,15 +47,31 @@ body                                { background-color: var(--session-classic-da
     display: none;   /* Hidden by default */
     position: fixed; /* Stay in place */
     z-index: 1;      /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%;     /* Full width */
+    height: 100%;    /* Full height */
+    padding-top: 100px; /* Location of the box */
+  /*overflow: auto;*/ /* Enable scroll if needed */
+  /*background-color: rgb(0,0,0);*/ /* Fallback color */
+  /*background-color: rgba(0,0,0,0.4);*/ /* Black w/ opacity */
 }
 .qr-code-modal-content {
+    background-color: #ffffff;
+    border: 1px solid #000000;
+    width:80%;
+    margin: auto;
+    padding: 20px;
 }
 .qr-code-modal-close {
     float: right;
-    font-size: 28px;
+    font-size: 32px;
     font-weight: bold;
+    color: #aaaaaa;
 }
 .qr-code-modal-close:hover,
 .qr-code-modal-close:focus {
     cursor: pointer;
+    text-decoration: none;
+    color: #000000;
 }