Изящные эффекты появления модального окна
827материалов
228тем на форуме
3003комментария
6152пользователя

Изящные эффекты появления модального окна


Описание:

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

Установка модального окна:

Шаг 1 - Установим JS:

Напоминаю, что в системе uCoz уже установлена библиотека jquery, поэтому вниз страницы, перед закрывающим тегом </body> установим два скрипта:
Код
<script src="/mod/classie.js"></script>                
<script src="/mod/modalEffects.js"></script>

Шаг 2 - Установим HTML:

Теперь нам следует установить также в низ вашей страницы html каркас окна:
Код
<div class="md-modal md-effect-1" id="modal-1">
   <div class="md-content">
   <h3>Привет!</h3>
   <div>
   <p>Это модальное окно. С ним можно вытворять следующее:</p>
   <ul>
   <li><strong>Читать:</strong> всегда читайте то, что написано в этих окнах, ведь их не просто так показывают.</li>
   <li><strong>Смотреть:</strong> модальное окно обладает определенным видом внимания, просто смотрите на него и цените его присутствие.</li>
   <li><strong>Закрыть:</strong> кликните на кнопку снизу, чтобы закрыть окно.</li>
   </ul>
   <button class="md-close">Закрыть!</button>
   </div>
   </div>
   </div><div class="md-overlay"></div>

Шаг 3 - Установим CSS:

Ну и в завершении нашего решения, давайте пропишем css стили нашему каркасу окна, а также установим его эффекты появление:
Код
<link rel="stylesheet" href="/mod/component.css" type="text/css" />

Внимание:

Обратите внимание, что в данном коде следует прописать номер модельного окна и его эффект появление:
Код
class="md-modal md-effect-1" id="modal-1"
  • md-effect-1 - номер эффекта появление окна
  • modal-1 - номер окна привязанный к кнопке
  • 16 эффектов - максимум цифра 16

а теперь давайте установим html код самой кнопки, при нажатии на которую появиться наше окно:
Код
<button class="button-cdm md-trigger" data-modal="modal-1">Моя кнопка</button>

Вот и всё, мы установили на ваш сайт в системе uCoz один из девятнадцати примеров модального окна.На этом всё, спасибо за внимание!

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

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 09.01.2016 в 16:55
Материал просмотрен: 2911 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 9 комментариев

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

9 комментариев


Ромчик
Не тоже самой. Во-первых, эффектов 16, во-вторых, эффекты разные
Viktor
Виктор @Viktor 10.01.2016 03:343
+1
На сколько я знаю, в это версии тоже 19 эффектов, куда еще то 3 дели? laughing
Ромчик
Да, эффектов 19, но последние 3 я решил убрать, так как они бесполезные и могут поломать шаблон.
villa
alex forbes @villa 10.01.2016 16:335
+2
Эти окошечки по круче чем предыдущие like
avatar
Анонимно 03.02.2016 11:446
0
Ребят что то не работает. Я правильно понял??? 2 шаг устанавливаешь в той же странице где и сама кнопка находиться ???
Ромчик
Да. Все верно. Дайте мне ссылку на сайт где установили скрипт
romchik161
очень нравится это окно, уже настроил под себя.
но заметил, что когда вставил туда форму входа, то после входа или выхода происходит какая то хрень...
на всех страницах начинает повторятся верхняя часть сайта.
то есть помимо $GLOBAL_AHEADER$ ниже идет еще код верхней части сайта.
как только уберешь все эти повторные коды в пу, снова откроешь это окно, войдешь в аккаунт или выйдешь, и код снова повторяется и портит вид сайта...
долго пытался исправить, но так и не получилось..
не знаю как обычное окно может влиять на код в панели управления..
но именно вызов этого модального окна, начинает коверкать сайт.

если ставить код окна в нижнюю часть сайта, то повторяться начинает нижняя часть, если в вверхнюю то верхняя...

жаль, а так понравилось это модальное окно....(((
1 2 »
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта