summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnna Knoerr <an.kn@protonmail.ch>2021-12-22 21:07:19 +0100
committerAnna Knoerr <an.kn@protonmail.ch>2021-12-22 21:07:19 +0100
commitd93bf2304241bc5f9f2e6d4efd10e630d069c8e2 (patch)
treef26234e8a80f1679725d202292ad3c502f35c50c
parenta35f80a1a83ca4c6ef1ef864e7f2041463a6170c (diff)
blog reset
-rw-r--r--blog.html74
1 files changed, 72 insertions, 2 deletions
diff --git a/blog.html b/blog.html
index 0343ad4..660c7b3 100644
--- a/blog.html
+++ b/blog.html
@@ -10,7 +10,6 @@
<link href="modal.css" rel="stylesheet">
<script src="modal.js"></script>
-
<title>Playground!</title>
</head>
@@ -18,7 +17,48 @@
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
-
+body {font-family: Arial, Helvetica, sans-serif;}
+
+/* The Modal (background) */
+.modal {
+ display: none; /* Hidden by default */
+ position: fixed; /* Stay in place */
+ z-index: 1; /* Sit on top */
+ padding-top: 100px; /* Location of the box */
+ 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 */
+.modal-content {
+ background-color: #fefefe;
+ margin: auto;
+ padding: 20px;
+ border: 1px solid #888;
+ width: 80%;
+}
+
+/* The Close Button */
+.close {
+ color: #aaaaaa;
+ float: right;
+ font-size: 28px;
+ font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+ color: #000;
+ text-decoration: none;
+ cursor: pointer;
+}
+</style>
+</head>
<body>
<h2>Modal Example</h2>
@@ -37,6 +77,36 @@
</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 the button, open the modal
+btn.onclick = 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>
+
+
+
<h1>Kurious Kolibri Blog</h1>