Inhabilitar el botón derecho con un mensaje emergente en pantalla completa

Inhabilitar el clic derecho con un aviso en pantalla completa

Proteger el contenido de tu blog es fundamental. En este tutorial aprenderás a bloquear el clic derecho y mostrar un mensaje visual en pantalla completa.

Vista previa del funcionamiento

Haz clic en el botón para ver el demo en acción.

HTML

<h1>Prueba de bloqueo de clic derecho</h1>
<p>Haz clic derecho en cualquier parte para ver el aviso.</p>
  

JavaScript

document.addEventListener("contextmenu", function(e) {
  e.preventDefault();

  if (document.getElementById("block-screen")) return;

  let overlay = document.createElement("div");
  overlay.id = "block-screen";
  overlay.innerHTML = `
    <div class="block-message">
      <h2>🚫 Acción no permitida</h2>
      <p>El clic derecho está bloqueado en este sitio.</p>
    </div>
  `;
  document.body.appendChild(overlay);

  overlay.addEventListener("click", () => overlay.remove());
});
  

CSS

#block-screen {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.block-message {
  text-align: center;
  color: #fff;
  font-family: Arial, sans-serif;
  padding: 30px;
  background: rgba(255,255,255,0.05);
  border: 2px solid #ff4444;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(255,0,0,0.5);
  max-width: 90%;
}

.block-message h2 {
  margin: 0 0 10px;
  font-size: 28px;
  color: #ff4444;
}

.block-message p {
  font-size: 18px;
}
  

¿Cómo funciona?

• 🖱️ Bloquea el clic derecho
• 🚫 Muestra aviso en pantalla completa
• 👆 Se cierra con clic
• 📱 Compatible con todos los dispositivos

Ver Demo en Vivo

Prueba el funcionamiento directamente en tu navegador.