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

19 эффектов появление модального окна, для uCoz


Описание:

В наше время все пытаются использовать различные идеи появления модального окна на своих сайтах. Есть бесконечные возможности для того, чтобы обеспечить стильное появление диалогового окна, и я хочу собрать некоторые замечательные идеи воедино, чтобы у вас проснулось вдохновения для творения! Вся суть состоит в том, чтобы при нажатии на кнопку (или любой другой элемент, может даже простое событие) будет появляться модальное окно, используя простой переход(или анимацию).

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

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

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

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

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

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

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

Внимание:

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

Код
<button class="button-cdm md-trigger" data-modal="modal-1">Моя кнопка</button>

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

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

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

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

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


ANDRUHA061
очень красиво сделано)) спасибо )))
StimuL
Геннадий @StimuL 06.01.2016 10:073
+5
забираем, пригодиться спасибо большое))
oZbestru
Павел @oZbestru 12.01.2016 17:444
0
Яндекс и опера не дают скачать файл, орут что там вирус dislike
Ромчик
Я щас скачал и с яндекса и с оперы, вирусов нет! Для убедительности проверьте файл - http://webmaster-ucoz.ru/ucoz/demo/modal/index.html на сайте - http://vms.drweb.ru/online
oZbestru
Павел @oZbestru 12.01.2016 18:006
0
вот теперь все нормально скачал, что было я хз, но с обоих браузеров не давало загрузить
Ромчик
Да не только у этих, у гугла сегодня пол дня сбои были)
oZbestru
Павел @oZbestru 12.01.2016 18:238
0
А затемнение заднего фона нужно включать? почему то не затемняет.. возможно мои стили или какой то скрипт мешают отображению заднего затемнения :(
Ромчик
Не нужно, скрипт затемнения уже находиться в css
oZbestru
Павел @oZbestru 12.01.2016 18:2910
0
нашел в css, только вот почему не хочет затемнять пока что разбираюсь
Ромчик
Скинь ссылку на сайт я тоже посмотрю
oZbestru
Павел @oZbestru 12.01.2016 18:3512
0
http://ozbest.ru/index/0-39 скрипт добавил на тест страничку
Ромчик
Да вроде бы норм все, конфликтов не заметил ни каких)
oZbestru
Павел @oZbestru 12.01.2016 19:0914
0
У меня нет хрома, но вот опера и яндекс не затемняют)
sensei
Алексей @sensei 23.01.2016 16:0216
0
Спасибо! Опробовал,НО также проблема-((
Ромчик
Ошибка исправлена, переустановите модальное окно
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта