diff options
| author | Anna Knoerr <an.kn@protonmail.ch> | 2021-12-21 06:36:22 +0100 |
|---|---|---|
| committer | Anna Knoerr <an.kn@protonmail.ch> | 2021-12-21 06:36:22 +0100 |
| commit | b8e01aaa1c89cdaf874f22afe6b3aa550b89c93e (patch) | |
| tree | 654abe4bf62c1dd2066c12676d4d90aba97aa1e2 | |
| parent | 2bf4652f55e6a101eabc7c2dd0414fcfdd175c83 (diff) | |
and now?
| -rw-r--r-- | blog.html | 98 |
1 files changed, 96 insertions, 2 deletions
@@ -11,8 +11,102 @@ <title>Blog</title> </head> <body> - <script src="modal.js"></script> - <link href="modal.css" rel="stylesheet"> + <!-- <script src="modal.js"></script> + <link href="modal.css" rel="stylesheet"> --> +<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> + +<!-- Trigger/Open The Modal --> +<button id="myBtn">Open Modal</button> + +<!-- The Modal --> +<div id="myModal" class="modal"> + + <!-- Modal content --> + <div class="modal-content"> + <span class="close">×</span> + <p>Some text in the Modal..</p> + </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 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> <!-- Button trigger modal --> |