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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

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

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

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

Наш план:

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

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

Без проблем:

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

Автор: 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 class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree