實現一個頁面鎖屏的功能

// lockScreen.js

function lockScreen(message = "Locked") {
  // Create a full-screen overlay
  const overlay = document.createElement('div');
  overlay.id = 'screen-lock-overlay';
  overlay.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure it's on top */
  `;

  // Create a message container
  const messageBox = document.createElement('div');
  messageBox.style.cssText = `
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
  `;
  messageBox.textContent = message;

  // Add an optional spinner
  const spinner = document.createElement('div');
  spinner.style.cssText = `
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 2s linear infinite;
    margin-top: 10px;
  `;

    // Keyframes for the spinner animation
  const style = document.createElement('style');
  style.innerHTML = `
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  `;
  document.head.appendChild(style);


  messageBox.appendChild(spinner);
  overlay.appendChild(messageBox);
  document.body.appendChild(overlay);


  // Function to unlock the screen
  function unlockScreen() {
    const overlayToRemove = document.getElementById('screen-lock-overlay');
    if (overlayToRemove) {
      document.body.removeChild(overlayToRemove);
    }
  }

  return unlockScreen;
}


// Example usage:

// Lock the screen with a custom message
const unlock = lockScreen("Processing, please wait...");

// Simulate an asynchronous operation (e.g., API call)
setTimeout(() => {
  // Unlock the screen after 3 seconds
  unlock();
}, 3000);


// Example usage with a button to lock/unlock:
/*
const lockButton = document.getElementById('lockButton');
let unlockFunction = null;

lockButton.addEventListener('click', () => {
  if (unlockFunction) {
    unlockFunction();
    unlockFunction = null;
    lockButton.textContent = "Lock Screen";
  } else {
    unlockFunction = lockScreen();
    lockButton.textContent = "Unlock Screen";
  }
});
*/

Explanation and Key Improvements:

• lockScreen() function: Creates and displays the overlay. Returns an unlockScreen function, which provides a clean way to remove the lock.
• unlockScreen() function: Specifically removes the overlay by ID, ensuring only the lock screen is removed.
• Styling: Uses cssText for cleaner inline styling. Includes a semi-transparent background for the overlay and basic styling for the message box. The spinner provides visual feedback to the user.
• Spinner: Added a loading spinner to visually indicate that an operation is in progress. This improves the user experience.
• Clearer Example Usage: Demonstrates how to use the lockScreen and unlockScreen functions with a simulated asynchronous operation. Also includes commented-out code showing how to use it with a button.
• z-index: Sets a high z-index to ensure the overlay appears on top of all other elements.
• Flexibility: Accepts an optional message parameter to customize the displayed text.

How to Use:

1. Include the JavaScript: Add the code to a <script> tag in your HTML file, or save it as a separate .js file and include it.
2. Call lockScreen(): Call the lockScreen() function when you want to lock the screen. Optionally, pass a custom message as