右键单击徽标以显示徽标下载选项

前几天我在 Invision 网站上，出于某种原因，我想获取他们的徽标。 有时候，你可能比谷歌图片搜索或甚至普通网络搜索（例如“Invision 徽标”）并希望找到带有徽标工具包下载的某种品牌页面，能有更好的运气（就像当你高兴地发现它是 SVG 时）。

因此，我右键单击了他们的徽标，希望用 DevTools “检查”它并查看它。

它没有显示上下文菜单，而是触发了一个模态窗口

我很高兴，因为这正是我想要的。

这是一个简单的零依赖方法

查看 CodePen 上 Chris Coyier 的笔 右键单击徽标以显示徽标选项 (@chriscoyier)。

你的应用程序可能已经拥有一个完整的炫酷系统来显示模态窗口。 如果是这样，那么它就更简单了。 将“右键单击”事件（实际上称为 contextmenu）附加到徽标并执行你的操作。

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

如果你没有模态窗口系统，那么创建一个简单的系统非常容易。 你需要一个覆盖层和一个模态窗口元素

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

以及一个计划

1. 右键单击徽标时，显示覆盖层和模态窗口
2. 单击关闭按钮时，隐藏它们

没问题

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

最基础的样式

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

永远不要破坏默认的上下文菜单，并用你自己的自定义行为覆盖它 OMG 你是邪恶的巨魔，你本不应该出生

你说得对！ 我的天啊，我做了什么！ 永远不能改变！ 杀人般的尖叫！