diff options
author | Anna Knoerr <an.kn@protonmail.ch> | 2021-12-22 21:07:19 +0100 |
---|---|---|
committer | Anna Knoerr <an.kn@protonmail.ch> | 2021-12-22 21:07:19 +0100 |
commit | d93bf2304241bc5f9f2e6d4efd10e630d069c8e2 (patch) | |
tree | f26234e8a80f1679725d202292ad3c502f35c50c | |
parent | a35f80a1a83ca4c6ef1ef864e7f2041463a6170c (diff) |
blog reset
-rw-r--r-- | blog.html | 74 |
1 files changed, 72 insertions, 2 deletions
@@ -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> |