added modal to index.html

tasks/index.html

@@ -26,8 +26,19 @@
         <!-- Add your site or application content here -->
         <div class="container-fluid">
         	<div class="row">
-                <a class="heading" onclick="showNote()">Library of Contingencies*</a><br>
-                  <iframe id="note" class="note" src="A_note_to_the_reader.html"></iframe>
+                <p class="heading">Library of Contingencies</p>
+                <!-- Trigger/Open The Modal -->
+                <button id="noteBtn">*</button>
+                <!-- The Modal -->
+                <div id="noteModal" class="modal">
+                    <!-- Modal content -->
+                    <div class="modal-content">
+                        <span class="close">&times;</span>
+                        <h1>*A note to the reader</h1>
+                        <p>This text has been edited with the intention to be published in a very specific form; a hyperlinked index of the tasks of the contingent librarian. These tasks, performed on the site of contingencies, the bootleg library, are described on the obverse, and related images and links to snippets are on the reverse.</p>
+                        <p>Please read it while flipping through, shuffling and reordering them, making your own text as you read.</p>
+                    </div>
+                </div>
             </div>
         	<div class="row">
   				<div class="col">
@@ -38,6 +49,7 @@
 					<iframe class="cards" name="recto" target="verso"></iframe>
                 </div>
             </div>
+        </div>
 
         <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
         <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
@@ -62,5 +74,32 @@ function hideNote() {
   document.getElementById("note").style.display = "none";
 }
 </script>
+ <script>
+        // Get the modal
+        var modal = document.getElementById("noteModal");
+
+        // Get the button that opens the modal
+        var btn = document.getElementById("noteBtn");
+
+        // 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>
     </body>
 </html>