diff options
author | Anna Knoerr <an.kn@protonmail.ch> | 2021-12-22 21:04:19 +0100 |
---|---|---|
committer | Anna Knoerr <an.kn@protonmail.ch> | 2021-12-22 21:04:19 +0100 |
commit | a35f80a1a83ca4c6ef1ef864e7f2041463a6170c (patch) | |
tree | b1f6c486c670c7477b38fa08038751d43efbf359 | |
parent | 5ea95fa1f8e462506ca70c47f293961d0b0ff3ce (diff) |
trying to externalize css and js
-rw-r--r-- | blog.html | 79 | ||||
-rw-r--r-- | modal.css | 2 |
2 files changed, 7 insertions, 74 deletions
@@ -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> @@ -1,3 +1,5 @@ +body {font-family: Arial, Helvetica, sans-serif;} + /* The Modal (background) */ .modal { display: none; /* Hidden by default */ |