如何优化Ajax请求时显示加载动画的Overlay与Modal组件

Let's address both the scrolling problem and click-blocking failure with targeted adjustments to your code:

1. Updated HTML (Accessibility & Structure Tweaks) #

<div class="Progress" style="display:none" aria-hidden="true" role="dialog" aria-modal="true">
  <div class="overlay"></div>
  <div class="modal" role="document" tabindex="-1">
    <h3>{% trans 'Please wait...' %}</h3>
    <div id="spinner">
      <div class="lds-css ng-scope">
        <div class="lds-spinner" style="width:100%;height:100%">
          <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
        </div>
      </div>
    </div>
  </div>
</div>

Added aria-modal="true" to clarify this is a modal component for screen readers.

2. Revised CSS (Fix Positioning & Blocking) #

/* Prevent body scrolling when loader is active */
body.no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
  top: 0;
}

.Progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  display: none;
  justify-content: center;
  align-items: center;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.75);
  z-index: 1;
  pointer-events: auto; /* Ensures clicks are blocked */
}

.modal {
  width: 20rem;
  padding: 16px;
  background: #ffffff; /* Makes modal stand out over overlay */
  z-index: 2;
  text-align: center;
  border-radius: 4px; /* Optional styling */
}

.modal h3 {
  font-family: helvetica;
  font-size:1.5rem;
  text-align: center;
  margin: 0 0 1rem 0;
}

#spinner {
  height: 5rem;
  width: 5rem;
  margin:auto;
}

/* Keep your existing lds-spinner animation styles */
.lds-spinner {
  /* Your spinner animation code here */
}

Key changes:

• Used 100vw/100vh to ensure the overlay covers the entire viewport
• Switched to flexbox for reliable modal centering
• Added pointer-events: auto to the overlay to block clicks
• Used rgba for overlay background (avoids opacity inheritance to child elements)
• Added a white background to the modal for visibility

3. JavaScript (Control Visibility & Scroll Position) #

Add these functions to handle showing/hiding the loader while preserving scroll position:

// Show loader and block scrolling
function showLoader() {
  const progressEl = document.querySelector('.Progress');
  const body = document.body;
  
  // Save current scroll position
  const scrollY = window.scrollY;
  body.style.top = `-${scrollY}px`;
  
  // Activate loader
  progressEl.style.display = 'flex';
  progressEl.setAttribute('aria-hidden', 'false');
  body.classList.add('no-scroll');
  
  // Move focus to modal for accessibility
  document.querySelector('.modal').focus();
}

// Hide loader and restore scrolling
function hideLoader() {
  const progressEl = document.querySelector('.Progress');
  const body = document.body;
  
  // Restore scroll position
  const scrollY = parseInt(body.style.top || '0');
  body.classList.remove('no-scroll');
  window.scrollTo(0, Math.abs(scrollY));
  body.style.top = '';
  
  // Deactivate loader
  progressEl.style.display = 'none';
  progressEl.setAttribute('aria-hidden', 'true');
}

Example Usage with Ajax: #

// Vanilla JS example
const xhr = new XMLHttpRequest();
xhr.open('GET', '/your-long-request-endpoint');

showLoader();

xhr.onload = () => {
  hideLoader();
  // Handle your response here
};

xhr.onerror = () => {
  hideLoader();
  // Handle errors here
};

xhr.send();

// jQuery example (if using)
/*
$.ajax({
  url: '/your-long-request-endpoint',
  beforeSend: showLoader,
  complete: hideLoader,
  success: (data) => { /* handle success */ },
  error: () => { /* handle error */ }
});
*/

Why This Works: #

1. Scroll Blocking: The no-scroll class locks the body in place, preventing users from scrolling behind the overlay. We save/restore the scroll position to avoid layout jumps.
2. Click Blocking: The overlay's pointer-events: auto ensures it captures all clicks, so users can't interact with elements below.
3. Reliable Positioning: Using fixed positioning with viewport units guarantees the overlay covers the entire screen, even on mobile devices.
4. Accessibility: Updated ARIA attributes and focus management help screen reader users understand the modal state.

内容的提问来源于stack exchange，提问作者user9727749