Logo-Rechtsklick zum Anzeigen der Logo-Download-Optionen

Ich war neulich auf der Invision-Website und wollte aus irgendeinem Grund deren Logo ergattern. Manchmal hat man damit mehr Erfolg (z. B. wenn man freudig feststellt, dass es SVG ist), als bei einer Google-Bildersuche oder selbst bei einer normalen Websuche nach etwas wie „Invision Logo“ und der Hoffnung, eine Art Branding-Seite mit einem Logo-Kit-Download zu finden.

Also habe ich mit der rechten Maustaste auf ihr Logo geklickt, in der Hoffnung, es mit den DevTools zu „inspizieren“ und es mir anzusehen.

Anstatt mir ein Kontextmenü anzuzeigen, wurde ein Modal ausgelöst

Ich war angenehm überrascht, denn genau das wollte ich.

Hier ist eine einfache Möglichkeit, dies ohne Abhängigkeiten zu tun

Siehe den Pen Rechtsklick auf Logo zum Anzeigen von Logo-Optionen von Chris Coyier (@chriscoyier) auf CodePen.

Ihre App hat möglicherweise bereits ein schickes System für die Anzeige von Modals. Wenn ja, ist es noch einfacher. Hängen Sie ein „Rechtsklick“-Ereignis (es heißt tatsächlich contextmenu) an das Logo und erledigen Sie Ihre Sache.

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

Wenn Sie kein Modal-System haben, ist es sehr einfach, eines rudimentär zu erstellen. Sie benötigen eine Überlagerung und ein Modal-Element

<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="#0">.zip you can download</a>.</p>
  <p><button id="close-modal-button">Close</button></p>
</div>

Und ein Plan

1. Wenn auf das Logo mit der rechten Maustaste geklickt wird, werden die Überlagerung und das Modal angezeigt
2. Wenn auf den Schließen-Button geklickt wird, werden diese ausgeblendet

Kein Problem

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);

Nackte Grundgestaltung

.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;
}

Brechen Sie NIEMALS das Standard-Kontextmenü und überschreiben Sie es mit Ihrem eigenen benutzerdefinierten Verhalten OMG, was sind Sie ein böser Troll, Sie hätten nie geboren werden dürfen

Sie haben Recht! Oh Gott, was habe ich getan! Nichts kann sich jemals ändern! Mörderische Schreie!!