diff options
| author | Anna Knoerr <an.kn@protonmail.ch> | 2021-12-21 06:31:38 +0100 |
|---|---|---|
| committer | Anna Knoerr <an.kn@protonmail.ch> | 2021-12-21 06:31:38 +0100 |
| commit | 33e70fafab726a89f0550c29a4e87a9bce791ae4 (patch) | |
| tree | 76a91e4d23825f0568bf709c92adb1eab2772e96 | |
| parent | f3abd4c445ba292e8b93c062b2d4e0231b09de58 (diff) | |
will modals work?
| -rw-r--r-- | blog.html | 17 | ||||
| -rw-r--r-- | modal.css | 37 | ||||
| -rw-r--r-- | modal.js | 25 |
3 files changed, 66 insertions, 13 deletions
@@ -11,8 +11,9 @@ <title>Blog</title> </head> <body> - <h1>Kurios Kolibri Blog</h1> - + <script src="modal.js"></script> + <link href="modal.css" rel="stylesheet"> + <h1>Kurious Kolibri Blog</h1> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> @@ -38,16 +39,6 @@ </div> </div> - <!-- Optional JavaScript; choose one of the two! --> - - <!-- Option 1: Bootstrap Bundle with Popper --> - <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> - - <!-- Option 2: Separate Popper and Bootstrap JS --> - <!-- - <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script> - <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script> - --> - </body> + </body> </html> diff --git a/modal.css b/modal.css new file mode 100644 index 0000000..2ea7ee9 --- /dev/null +++ b/modal.css @@ -0,0 +1,37 @@ + /* The Modal (background) */ +.modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + 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/Box */ +.modal-content { + background-color: #fefefe; + margin: 15% auto; /* 15% from the top and centered */ + padding: 20px; + border: 1px solid #888; + width: 80%; /* Could be more or less, depending on screen size */ +} + +/* The Close Button */ +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} diff --git a/modal.js b/modal.js new file mode 100644 index 0000000..24a1e55 --- /dev/null +++ b/modal.js @@ -0,0 +1,25 @@ +// 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 on 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"; + } +} |