Завантаження з допомогою правої кнопки миші по логотипу

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

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

Я був приємно здивований, адже це саме те, що я хотів.

Простий незалежний спосіб

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

logo.addEventListener. (‘contextmenu’, function(event) {
// робіть все що завгодно
}, false);

Якщо ж готової системи модальних вікон у вас немає, не так-то й складно зробити простеньку свою систему. Потрібно всього-то додати перекриває шар і модальний елемент:

Наш план:

Без проблем:

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