Загрузка с помощью правой кнопки мыши по логотипу

Загрузка с помощью правой кнопки мыши по логотипу

От автора: как-то я был на сайте Invision, и мне захотелось скачать их логотип. В некоторых случаях вам может повести (например, если логотип SVG), и вы найдете что-то вроде страницы бренда, где можно загрузить целый набор логотипов. А иногда придется немного погуглить обычным поиском или поиском по изображениям с запросом типа «Invision Logo».

Я кликаю правой кнопкой мыши по их логотипу, дабы проинспектировать элемент с помощью панели разработчика, а в ответ получаю модальное окно:

Я был приятно удивлен, ведь это именно то, что я хотел.

Простой независимый способ

В вашем веб-приложении, может быть, уже реализована целая система показа модальных окон. Если таковая имеется, так даже легче. Прицепите событие «right click» (настоящее название contextmenu) к логотипу и напишите соответствующий код.

logo.addEventListener('contextmenu', function(event) {
  // делайте все что угодно
}, 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>

Наш план:

По правому клику показываем перекрывающий слой и модальное окно

По клику на кнопку закрываем их

Без проблем:

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

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree