Right Click Logo to Show Logo Options

index.html

<header>
  <a class="logo" id="logo" href="#0">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/noun_369802.svg" alt="" />
    Right Click Productions
 </a>
</header>

<main>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque saepe culpa explicabo! Aperiam adipisci quas recusandae dolorum obcaecati. In minus sunt modi assumenda laborum fuga molestias, error, facilis nobis autem libero amet, earum eaque, sit! Odit alias, sequi ratione repudiandae, libero, suscipit deleniti obcaecati amet nam nisi reiciendis eos. Culpa!</div>
  <div>Reiciendis ullam amet beatae expedita, iste omnis repudiandae delectus illum! Alias labore, velit soluta laborum voluptate consectetur optio impedit quia! Magni sapiente excepturi corporis adipisci consectetur voluptatum provident repellendus error odit ipsum vel reiciendis ipsam sequi optio quos molestiae, quia, placeat atque fugit veritatis labore. Ipsum, illo, eius? Praesentium, magnam!</div>
  <div>Quod accusamus asperiores quam, eos, et temporibus, ex illum quos ipsa suscipit cum nisi exercitationem quis ad vero libero necessitatibus beatae eum fugit molestias ipsum pariatur rerum dignissimos ab. Natus at repellendus, dolor nostrum officia cum expedita saepe laboriosam, architecto corporis beatae. Praesentium voluptas, tenetur asperiores incidunt impedit magnam non.</div>
  <div>Deserunt ab, doloribus, ut ex optio quasi temporibus odit dolorum amet molestiae officia hic harum nesciunt iusto. Amet, vitae molestias enim animi reiciendis delectus reprehenderit repellat rerum sed cum dolorem in, odit sit nobis doloremque neque, culpa error expedita natus minus saepe nemo illum. Sequi necessitatibus sint assumenda illum repellat.</div>
  <div>Delectus distinctio excepturi accusantium molestiae corrupti ex ipsum mollitia quod consequatur aperiam exercitationem minima, doloremque harum quo voluptatibus maxime blanditiis eveniet tempora est necessitatibus cumque ea repudiandae odit laborum consectetur. Id qui, saepe ratione culpa, maxime doloremque. Est, nostrum animi, reiciendis quia accusantium adipisci, magni cumque consectetur consequuntur tempore fugit?</div>
  <div>Perferendis pariatur officiis facere incidunt odio eveniet obcaecati, quidem deserunt, fugit quod voluptates necessitatibus possimus officia, sit cupiditate voluptatem eos in! Dolor nihil sapiente sequi unde. Odio ad quidem corporis error, officiis laborum. Amet cumque expedita ullam culpa itaque temporibus rerum, reprehenderit doloribus atque placeat debitis provident voluptatem consequuntur natus!</div>
  <div>Animi aliquam, similique, quidem amet enim omnis aliquid voluptatum necessitatibus hic et commodi deserunt at error laborum dolores quaerat ab quasi, laudantium vel repellendus voluptatem doloremque optio. Ex, accusamus, ipsum. Laudantium tenetur blanditiis neque velit doloremque et fugit ipsa molestias quae temporibus, consectetur tempore, cumque voluptatibus, delectus aliquam reprehenderit. Fugit.</div>
  <div>Quas laboriosam, explicabo iure. Eum error, saepe facilis sunt doloremque expedita impedit. Corporis, quidem alias voluptates assumenda blanditiis quos doloribus! Aperiam impedit veniam nulla commodi autem inventore ratione non distinctio nesciunt sequi! Aspernatur reprehenderit enim natus iure quaerat amet, doloribus quo sequi quae, necessitatibus dolores id ipsam. Dolore, tempora, sapiente.</div>
  <div>Maxime nesciunt molestias officia nobis voluptatum tempora. Fuga, voluptatibus cumque ratione odit repudiandae accusamus dicta soluta nisi, nobis vel reiciendis commodi, magnam odio officia? Vel ullam fugiat minima odio repellat laboriosam et veniam debitis ipsum totam officiis modi mollitia, aliquid minus alias facilis, quaerat magnam eligendi eum tenetur cupiditate corporis.</div>
</main>

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

right-click-logo-to-show-logo-options.markdown

Right Click Logo to Show Logo Options

A Pen by Chris Coyier on CodePen.

License.

script.js

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

style.css

@import url(https://fonts.googleapis.com/css?family=Patua+One);
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: 'Patua One', cursive;
}

header {
  padding: 20px;
  background: #eee;
}

.logo {
  display: inline-flex;
  align-items: center;
  padding: 10px;
  font-size: 28px;
  text-decoration: none;
  color: inherit;
}
.logo >  img {
  width: 50px;
  margin-right: 15px;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 6%;
}
main  > div {
  min-width: 200px;
  max-width: 350px;
  flex: 1;
  background: #ccc;
  margin: 0 3% 3% 0;
  color: #666;
  padding: 20px;
}

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