Модальные окна сейчас уже не так популярны как раньше — это факт. Но красиво оформленные и плавно появляющиеся в нужный момент (когда человек сам этого хочет) имеют место быть и их можно использовать. Но в какой момент человек сам решает чтобы появилось
модальное окно?
Например:
форма регистрации и
входа на сайт,
подробная подсказка, которая находится в модальном окне. Конечно, уже всех раздражают эти выскакивающие
модальные окна, которые только отпугивают и посетителей и потенциальных клиентов. Но мы рассмотрим более интересный способ использования модальных окон на сайте...
Установка модального окна:
Шаг 1 - Установим
JS:
Напоминаю, что в системе
uCoz уже установлена библиотека
jquery, поэтому
вниз страницы, перед закрывающим тегом установим два скрипта:
Код
<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 один из девятнадцати примеров
модального окна.На этом всё, спасибо за внимание!
Не выводит сообщения в чат.
Игор приносим свои извинения за предоставленные не удобства, сайт проходит перекваливфикацыю, по эт
Спасибо, вы не виноват, эта все zornet не указывает авторов и источник, если ему так написать то ба
