added modal

Author: mrcbax

content/_index.md

@@ -77,15 +77,7 @@ template = "radar.html"
     </div>
     <div class="margin-top" style="font-size: 1.5em;">
       <nav class="centered">
-<b>If you are here because of a message in your minecraft server console, this wasn't us and is a harassment campaign from a griefing group
-Your server is not hacked they are just sending messages in your chat from the dynmap plugin/mod
-To fix this open the dynmap config and change the allowchat setting to false like this:</b>
-<pre>
- - class: org.dynmap.SimpleWebChatComponent
-    allowchat: false
-    # If true, web UI users can supply name for chat using 'playername' URL parameter.  'trustclientname' must also be set true.
-    allowurlname: false
-</pre>
+
         <a class="fancy-link" href="//discord.gg/BWWBFvu654">Discord</a>
         <a class="fancy-link" href="//github.com/serverscanning">GitHub</a>
         <a class="fancy-link" href="/about">About</a><br>
@@ -103,3 +95,84 @@ To fix this open the dynmap config and change the allowchat setting to false lik
     </div>
   </div>
 </div>
+<div id="myModal" class="modal">
+
+  <!-- Modal content -->
+  <div class="modal-content">
+    <span class="close">&times;</span>
+    <b>If you are here because of a message in your minecraft server console, this wasn't us and is a harassment campaign from a griefing group
+Your server is not hacked they are just sending messages in your chat from the dynmap plugin/mod
+To fix this open the dynmap config and change the allowchat setting to false like this:</b>
+<code>
+ - class: org.dynmap.SimpleWebChatComponent
+    allowchat: false
+    # If true, web UI users can supply name for chat using 'playername' URL parameter.  'trustclientname' must also be set true.
+    allowurlname: false
+</code>
+  </div>
+
+</div>
+<script>
+  // Get the modal
+var modal = document.getElementById("myModal");
+
+// Get the button that opens the modal
+var btn = document.getElementById("myBtn");
+
+// Get the <span> element that closes the modal
+var span = document.getElementsByClassName("close")[0];
+
+// When the user clicks on the button, open the modal
+document.addEventListener("DOMContentLoaded", function() {
+  modal.style.display = "block";
+});
+
+// When the user clicks on <span> (x), close the modal
+span.onclick = function() {
+  modal.style.display = "none";
+}
+
+// When the user clicks anywhere outside of the modal, close it
+window.onclick = function(event) {
+  if (event.target == modal) {
+    modal.style.display = "none";
+  }
+} 
+</script>
+<style> /* The Modal (background) */
+.modal {
+  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 */
+  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 */
+}
+
+/* Modal Content/Box */
+.modal-content {
+  background-color: #fefefe;
+  margin: 15% auto; /* 15% from the top and centered */
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%; /* Could be more or less, depending on screen size */
+}
+
+/* The Close Button */
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+} </style>