diff options
| author | Anna Knoerr <an.kn@protonmail.ch> | 2022-01-06 23:16:37 +0100 |
|---|---|---|
| committer | Anna Knoerr <an.kn@protonmail.ch> | 2022-01-06 23:16:37 +0100 |
| commit | 8bfb4a2c7993fc0217d7c4cd70acaca03f4608b5 (patch) | |
| tree | f845d7909a1dc8bab98c450e158787f46235698a | |
| parent | 85a3a221bda7c33f92d73853fdc08c9fa4fdfbf9 (diff) | |
testing blog.html
| -rw-r--r-- | archive/blog.html | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/archive/blog.html b/archive/blog.html new file mode 100644 index 0000000..6e55773 --- /dev/null +++ b/archive/blog.html @@ -0,0 +1,85 @@ +<!doctype html> +<html lang="en"> + <head> + <!-- Required meta tags --> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + + <!-- Bootstrap CSS --> + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> + + <link href="modal.css" rel="stylesheet"> + <script src="modal.js"></script> + <title>Playground!</title> + </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> + </body> + +<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 --> +<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> + Launch demo 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> + </body> +</html> + |