От автора: как-то я был на сайте Invision, и мне захотелось скачать их логотип. В некоторых случаях вам может повести (например, если логотип SVG), и вы найдете что-то вроде страницы бренда, где можно загрузить целый набор логотипов. А иногда придется немного погуглить обычным поиском или поиском по изображениям с запросом типа «Invision Logo».
Я кликаю правой кнопкой мыши по их логотипу, дабы проинспектировать элемент с помощью панели разработчика, а в ответ получаю модальное окно:
Я был приятно удивлен, ведь это именно то, что я хотел.
Простой независимый способ
В вашем веб-приложении, может быть, уже реализована целая система показа модальных окон. Если таковая имеется, так даже легче. Прицепите событие «right click» (настоящее название contextmenu) к логотипу и напишите соответствующий код.
|
1 2 3 |
logo.addEventListener('contextmenu', function(event) { // делайте все что угодно }, false); |
Если же готовой системы модальных окон у вас нет, не так-то и сложно сделать простенькую свою систему. Нужно всего-то добавить перекрывающий слой и модальный элемент:
|
1 2 3 4 5 6 7 |
<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> |
Наш план:
По правому клику показываем перекрывающий слой и модальное окно
По клику на кнопку закрываем их
Без проблем:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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); |
Добавим минимальные стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
.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
Источник: //css-tricks.com/
Редакция: Команда webformyself.
