Dynamic Modal Dialogs, Overlay Mechanics & Keyboard Accessibility

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: 'Segoe UI', sans-serif; background: #060c18; color: #fff; padding: 24px; }
    .backdrop {
      position: fixed; inset: 0; background: rgba(0,0,0,0.75);
      backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center;
      z-index: 1000;
    }
    .backdrop.active { display: flex; }
    .modal-box {
      background: #0c1328; border: 1px solid #1e293b; border-radius: 14px;
      padding: 24px; max-width: 440px; width: 90%; box-shadow: 0 20px 40px rgba(0,0,0,0.6);
      transform: scale(0.95); transition: transform 0.2s;
    }
    .backdrop.active .modal-box { transform: scale(1); }
    .modal-header { display: flex; justify-content: space-between; align-items: center; }
    .close-btn { background: none; border: none; color: #94a3b8; font-size: 20px; cursor: pointer; }
    .modal-footer { margin-top: 20px; display: flex; justify-content: flex-end; gap: 8px; }
    button.primary { background: #2563eb; color: #fff; border: none; padding: 10px 16px; border-radius: 6px; cursor: pointer; }
  </style>
</head>
<body>
  <h2>🎓 BCA Portal Confirmation Engine</h2>
  <button class="primary" id="openModalBtn">Open Submission Modal</button>

  <div class="backdrop" id="modalBackdrop">
    <div class="modal-box" id="modalContent">
      <div class="modal-header">
        <h3>Confirm Practical Submission</h3>
        <button class="close-btn" id="closeBtn">✕</button>
      </div>
      <p style="color:#94a3b8;margin-top:12px;">Are you ready to submit Day 35 practical tasks to the evaluation studio? This action will sync with your profile.</p>
      <div class="modal-footer">
        <button id="cancelBtn" style="background:#334155;color:#fff;border:none;padding:10px 16px;border-radius:6px;cursor:pointer;">Cancel</button>
        <button class="primary" id="confirmBtn">Confirm & Submit</button>
      </div>
    </div>
  </div>

  <script>
    const backdrop = document.getElementById("modalBackdrop");
    const modalContent = document.getElementById("modalContent");
    const openBtn = document.getElementById("openModalBtn");
    const closeBtn = document.getElementById("closeBtn");
    const cancelBtn = document.getElementById("cancelBtn");

    function openModal() {
      backdrop.classList.add("active");
      document.body.style.overflow = "hidden"; // Prevent body scroll
    }

    function closeModal() {
      backdrop.classList.remove("active");
      document.body.style.overflow = ""; // Restore body scroll
    }

    openBtn.addEventListener("click", openModal);
    closeBtn.addEventListener("click", closeModal);
    cancelBtn.addEventListener("click", closeModal);

    // Close on backdrop click (outside modal content)
    backdrop.addEventListener("click", (e) => {
      if (e.target === backdrop) closeModal();
    });

    // Close on ESC key press
    window.addEventListener("keydown", (e) => {
      if (e.key === "Escape" && backdrop.classList.contains("active")) {
        closeModal();
      }
    });
  </script>
</body>
</html>