Haga clic con el botón derecho en el logotipo para mostrar las opciones de descarga del logotipo | Programar Plus

Estaba en el sitio web de Invision el otro día y quería enganchar su logo por alguna razón u otra. A veces puedes tener más suerte haciendo eso (como cuando descubres felizmente que es SVG) que con la búsqueda de imágenes de Google o incluso la búsqueda web normal de algo como “Logotipo de Invision” y buscar algún tipo de página de marca con la descarga de un kit de logotipo.

Así que hice clic con el botón derecho en su logotipo, con la esperanza de “inspeccionarlo” con DevTools y comprobarlo.

En lugar de mostrarme un menú contextual, activó un modal:

Me sorprendió gratamente, porque eso es exactamente lo que quería.

Aquí hay una forma simple de cero dependencias de hacer eso

Vea el logotipo del botón derecho del ratón para mostrar las opciones del logotipo de Chris Coyier (@chriscoyier) en CodePen.

Es posible que su aplicación ya tenga un sistema completo para mostrar modales. Si es así, entonces es aún más fácil. Adjunte un evento de “clic derecho” (en realidad se llama contextmenu) al logo y haz lo tuyo.

logo.addEventListener('contextmenu', function(event) {
  // do whatever you do to show a modal
}, false);

Si no tiene un sistema modal, es muy fácil crear uno rudimentario. Necesita una superposición y un elemento modal:

<div class="overlay" id="overlay"></div>

<div class="modal" id="modal">
  <h3>Looking for our logo?</h3>
  <p>You clever thing. We've prepared a <a href="https://css-tricks.com/right-click-logo-show-logo-download-options/#0">.zip you can download</a>.</p>
  <p><button id="close-modal-button">Close</button></p>
</div>

Y un plan:

1. Cuando se hace clic con el botón derecho en el logotipo, se muestra la superposición y el modo
2. Cuando se hace clic en el botón cerrar, escóndelos

No hay problema:

var logo = document.querySelector("#logo");
var button = document.querySelector("#close-modal-button");
var overlay = document.querySelector("#overlay");
var modal = document.querySelector("#modal");

logo.addEventListener('contextmenu', function(event) {
  event.preventDefault();
  overlay.classList.add("show");
  modal.classList.add("show");
}, false);

button.addEventListener('click', function(event) {
  event.preventDefault();
  overlay.classList.remove("show");
  modal.classList.remove("show");
}, false);

Peinado de huesos desnudos:

.overlay {
  position: fixed;
  background: rgba(0, 0, 0, 0.75);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.overlay.show {
  display: block;
}

.modal {
  position: fixed;
  left: 50%;
  width: 300px;
  margin-left: -150px;
  top: 100px;
  background: white;
  padding: 20px;
  text-align: center;
  display: none;
}
.modal.show {
  display: block;
}
.modal > h3 {
  font-size: 26px;
  color: #900;
}

Nunca NUNCA rompa el menú contextual predeterminado y anule con su propio comportamiento personalizado Dios mío, ¿qué es usted, un troll malvado que nunca debería haber nacido?

¡Estás bien! ¡Oh Dios, qué he hecho! ¡Nada puede cambiar jamás! Gritos asesinos !!