Модальное окно “Motion” с SVG эффектом
827материалов
228тем на форуме
3003комментария
6152пользователя

Модальное окно “Motion” с SVG эффектом


Описание:

Сейчас довольно трудно представить себе сайт, где были бы не нужны модальные окна. Пользовательские диалоги, отправка и приём данных, уведомления, предупреждения, подсказки — всё это может появляться в виде всплывающих окон на самых разных сайтах, от развлекательных до корпоративных. Используя представленные в нашей коллекции скрипты, вы сможете без лишней нагрузки организовать работу вплывающих окон на своём сайте. Простое, и в тоже время необычное модальное окно с помощью элементов SVG. Данный тип веб-графики очень стремительно набирает обороты, а современные технологии помогают делать потрясающие вещи. Модальное окно с эффектом при появлении. Поддержка IE9+

Установка:

Между <head> и </head> вставляете код:
Код
<script src="http://webmaster-ucoz.ru/ucoz/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>

Там же в нижней части сайта перед </body> вставляете код:
Код
<script src="http://webmaster-ucoz.ru/ucoz/js/menu/motionblur.js"></script>
<script src="http://webmaster-ucoz.ru/ucoz/js/modal.js"></script>

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 29.09.2016 в 15:00
Материал просмотрен: 986 раз
Категория материала: Скрипты для uCoz
К материалу оставлены: 4 комментария

Пожаловаться
Сказать спасибо

4 комментария


zergaR
Андрей @zergaR 29.09.2016 22:091
0
Ну в принципе не плохое модальное окно. Вот только он приторможено вылетает в старых версиях браузеров.
Ромчик
Да, есть немного
666666
unknown @666666 30.09.2016 00:542
0
Роман Николаевич, а что означает рядом с ником @ ?
Похоже на твиттер, только в Ucoz что оно даёт?
Ромчик
Это разделитель между ФИО и Логином
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта