Главная » Файлы » Скрипты для Ucoz |
Модальное окно “Motion” с SVG эффектом
[ · Скриншот ] | 05.10.2016, 16:00 |
Сейчас довольно трудно представить себе сайт, где были бы не нужны модальные окна. Пользовательские диалоги, отправка и приём данных, уведомления, предупреждения, подсказки — всё это может появляться в виде всплывающих окон на самых разных сайтах, от развлекательных до корпоративных. Используя представленные в нашей коллекции скрипты, вы сможете без лишней нагрузки организовать работу вплывающих окон на своём сайте. Простое, и в тоже время необычное модальное окно с помощью элементов SVG. Данный тип веб-графики очень стремительно набирает обороты, а современные технологии помогают делать потрясающие вещи. Модальное окно с эффектом при появлении. Поддержка IE9+ Установка: Между head и /head вставляете код: Код <script src="/js/menu/menu.min.js"></script> <style> .content { text-align: center; } .modal-overlay { background: rgba(60, 63, 78, 0.9); position: fixed; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; visibility: hidden; } .modal-wrapper { position: fixed; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; pointer-events: none; } .modal { background: #fff; color: #666871; text-align: center; width: 400px; max-width: 90%; height: 250px; top: 0; left: 0; bottom: 0; right: 0; position: absolute; margin: auto; padding: 40px; pointer-events: auto; font-weight: bold; visibility: hidden; } @media screen and (max-width: 40em) { .modal { height: 350px; } } .modal h2 { font-size: 2.25em; margin: 0.5em 0 0.25em; color: #BDBFCA; font-family: 'Lustria', 'Goudy Old Style', Garamond, 'Big Caslon', 'Times New Roman', serif; } /* Buttons */ .open-modal { border: none; margin: 3em 0 7em 0; background: #7D87AE; color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 20px; padding: 1em 2em; font-weight: bold; border-radius: 40px; -webkit-transition: background 0.3s; transition: background 0.3s; } .open-modal:hover { background: #6d78a5; } .close-modal { color: #aaa; background: none; position: absolute; top: 10px; right: 10px; border: none; width: 20px; height: 20px; line-height: 15px; font-size: 22px; font-weight: bold; } .close-modal:hover { color: #666871; } </style> Код окна в нижнюю часть сайта перед /body вставляете код меню: Код <div class="modal-overlay"></div> <div class="modal-wrapper"> <div class="modal js-blur"> <button class="close-modal">×</button> <h2>uCoz Web Services</h2> <p>uCoz — бесплатная система управления сайтом и хостинг для сайтов, созданных с её использованием. Модули uCoz могут использоваться как в единой связке для создания полнофункционального сайта, так и по отдельности, например, в качестве блог-платформы, интернет-магазина и др. К 2014 году на его основе было создано более 20 млн страничек (из них активны были около 1 млн), на отдельных доменах работали 54 тыс. сайтов. uCoz.ru находится на 73-м месте самых популярных российских сайтов по данным Alexa Internet.</p> <p>Владелец сервиса — ООО «Юкоз Медиа», Россия.</p> </div> </div> </div> Там же в нижней части сайта перед |