Update app.py

app.py

@@ -129,30 +129,47 @@ modal_and_cart_js = """
     };
     let finalized = false;
     function openModal(name, image, description, price) {
-        if (finalized) {
+       if (finalized) {
             alert("You cannot add more items after finalizing your order.");
             return;
         }
         const modal = document.getElementById('modal');
-        modal.style.display = 'block';
-        modal.style.position = 'fixed';
-        if (window.innerWidth <= 768) {
+        const buttonRect = event.target.getBoundingClientRect(); // Get button position
+
+        // Adjust modal width based on screen size
+        if (window.innerWidth <= 768) { // For phone screens
             modal.style.width = '90%';
-        } else {
+        }
+        else { // For larger screens (laptops)
             modal.style.width = '30%';
         }
-        modal.style.top = '15%';
-        modal.style.left = '50%';
-        modal.style.transform = 'translate(-50%, -50%)';
+
+        const modalWidth = modal.offsetWidth;
+        const modalHeight = modal.offsetHeight;
+
+        // Calculate the modal's position dynamically
+        const modalTop = window.scrollY + buttonRect.top + buttonRect.height / 2 - modalHeight / 2;
+        const modalLeft = window.scrollX + buttonRect.left + buttonRect.width / 2 - modalWidth / 2;
+
+        // Set modal position
+        modal.style.display = 'block';
+        modal.style.position = 'absolute'; // Use absolute to position it dynamically
+        modal.style.top = `${modalTop}px`;
+        modal.style.left = `${modalLeft}px`;
+
+        // Update modal content
         document.getElementById('modal-image').src = image;
         document.getElementById('modal-name').innerText = name;
         document.getElementById('modal-description').innerText = description;
         document.getElementById('modal-price').innerText = price;
+
+        // Reset extras and input fields
         const extrasInputs = document.querySelectorAll('input[name="biryani-extra"]');
         extrasInputs.forEach(input => input.checked = false);
         document.getElementById('quantity').value = 1;
         document.getElementById('special-instructions').value = '';
     }
+
     function closeModal() {
         document.getElementById('modal').style.display = 'none';
     }