summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAnna Knoerr <an.kn@protonmail.ch>2021-12-22 21:04:19 +0100
committerAnna Knoerr <an.kn@protonmail.ch>2021-12-22 21:04:19 +0100
commita35f80a1a83ca4c6ef1ef864e7f2041463a6170c (patch)
treeb1f6c486c670c7477b38fa08038751d43efbf359
parent5ea95fa1f8e462506ca70c47f293961d0b0ff3ce (diff)
trying to externalize css and js
-rw-r--r--blog.html79
-rw-r--r--modal.css2
2 files changed, 7 insertions, 74 deletions
diff --git a/blog.html b/blog.html
index 10cf4a2..0343ad4 100644
--- a/blog.html
+++ b/blog.html
@@ -8,56 +8,17 @@
<!-- 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>
- <!-- <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>
@@ -76,36 +37,6 @@ body {font-family: Arial, Helvetica, sans-serif;}
</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>
diff --git a/modal.css b/modal.css
index 2ea7ee9..4c827c1 100644
--- a/modal.css
+++ b/modal.css
@@ -1,3 +1,5 @@
+body {font-family: Arial, Helvetica, sans-serif;}
+
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */