Порой на сайте хочется скачать изображения, нажав при этом правой кнопкой мыши на изображение, но не всегда скачанное изображение будет необходимого качества и размера. На многих сайтах содержится специальная страница с изображениями логотипа в высоком разрешении, но такие страницы бывает очень непросто найти. По этому предлагаем просмотреть урок, как создать красивый вариант загрузок изображений, средствами jQuery мы создадим модальное окно с предложениями загрузки разных вариантов изображений.

 
Все достаточно просто работает, нам просто необходимо перехватить нажатие правой кнопки мыши и вывести свое модальное окно, с необходимыми нам параметрами. Нам поможет jQuery и немного магии CSS3. Сначала посмотрим разметку HTML.

После включения jQuery запускаем скрипт на выполнение. Когда DOM будет готова, привязываем событие нажатия правой кнопки мыши к логотипу.

Рассмотрим модальное окно. Перед выводом модального окна нужно создать необходимые элементы и загрузить содержание. Для демонстрации содержание является статическим, но в реальных проектах лучше использовать AJAX.

Сначала добавляется тень к телу документа, а затем добавляется модальный контейнер с содержанием. Мы скрываем тень и контейнер и выводим их с использованием эффектов.  Например, при нажатии кнопки мыши на тени или кнопке закрытия, все должно исчезать. Вставим следующий код в функцию $(document).ready():

Напоследок создаем стили CSS, чтобы придать красивый вид модальному окну:

Код не является совершенством и может быть улучшен. Но основной задачей урока является работающий пример того, как небольшие улучшения могут существенно повлиять на удобство использования ресурса. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.