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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

Если же готовой системы модальных окон у вас нет, не так-то и сложно сделать простенькую свою систему. Нужно всего-то добавить перекрывающий слой и модальный элемент:

Наш план:

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

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

Без проблем:

Добавим минимальные стили:

Автор: Chris Coyier

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Получить

Метки:

Похожие статьи:

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

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

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