Implemented pop-up functionality for help modal.

templates/boneset.html

@@ -79,6 +79,15 @@ <h3>Description</h3>
     </div>
     <script type="module" src="js/main.js"></script>
 
+    <div id = "help-modal">
+        <div id = "help-modal-content">
+            <h2>How to Use</h2>
+            <p>
+                Use the dropfown menus to select a bonset, bone, or sub-bone. <br>
+                Once selected, you can view the image and description of the selected item. <br>
+            </p>
+            <button id = "close-help-modal">Close</button>
+    </div>
 </body>
 
 </html>

templates/js/sidebar.js

@@ -30,3 +30,17 @@ export function initializeSidebar() {
         });
     }
 }
+document.addEventListener('DOMContentLoaded', () => {
+    const helpButton = document.getElementById('text-button-Help');
+    const helpModal = document.getElementById('help-modal');
+    const closeHelpModal = document.getElementById('close-help-modal');
+    if (helpButton && helpModal && closeHelpModal) {
+        helpButton.addEventListener('click', () => {
+            helpModal.style.display = 'flex';
+        });
+        closeHelpModal.addEventListener('click', () => {
+            helpModal.style.display = 'none';
+        });
+    }
+})
+

templates/style.css

@@ -201,3 +201,40 @@ ul li {
     pointer-events: none; /* So clicks pass through to the image */
 }
 
+#help-modal {
+    display: none; 
+    position: fixed; 
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 2000;
+    justify-content: center;
+    align-items: center;
+}
+
+#help-modal-context {
+    background: #fff;
+    padding: 2em 1.5em;
+    border-radius: 10px;
+    max-width: 400px;
+    margin: auto;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
+    text-align: center;
+    position: relative;
+}
+
+#close-help-modal {
+    margin-top: 1em;
+    padding: 8px 20px; 
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+#close-help-modal:hover {
+    background-color: #0056b3;
+}