HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blocking vs pass-through layer</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      padding: 24px;
      background: #f8fafc;
    }

    .pe-panel {
      position: relative;
      max-width: 320px;
      padding: 24px;
      background: #fff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
    }

  .pe-panel button {
      margin-top: 12px;
      padding: 10px 16px;
      border: none;
      border-radius: 8px;
      background: #2563eb;
      color: #fff;
      cursor: pointer;
    }

    .pe-shield {
      position: absolute;
      inset: 0;
      border-radius: 12px;
      background: rgba(148, 163, 184, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      color: #334155;
    }

    .pe-shield.blocking {
      pointer-events: auto;
      cursor: not-allowed;
    }

    .pe-shield.pass-through {
      pointer-events: none;
    }
  </style>
</head>
<body>
  <h1>Blocking overlay toggle</h1>
  <p>Switch whether the shield blocks clicks on the panel below.</p>
  <label>
    <input type="checkbox" id="blockToggle" checked onchange="toggleShield()">
    Block clicks (pointer-events: auto)
  </label>
  <div class="pe-panel" style="margin-top: 16px;">
    <p>Content behind the shield.</p>
    <button type="button" onclick="alert('Panel button clicked!')">Action</button>
    <div class="pe-shield blocking" id="shield">Blocked</div>
  </div>
  <script>
    function toggleShield() {
      const shield = document.getElementById('shield');
      const blocking = document.getElementById('blockToggle').checked;
      shield.className = 'pe-shield ' + (blocking ? 'blocking' : 'pass-through');
      shield.textContent = blocking ? 'Blocked' : 'Pass-through';
    }
  </script>
</body>
</html>
Lines: 0 | Characters: 0
Live Preview Auto-refresh on Run
Toggle pointer-events on a loading layer
