Файлы Скрипты и модификации

Модальное окно для uCoz

Описание:
Хороший скрипт модального окна для uCoz. Предусматривает подключение всего 1 скрипта на сайт. Не дает большой нагрузки на сайт. Свободная стилизация окна.

Установка
1. На нужной странице перед установить следующее:
Код
<div id="myModal" class="modal">  
<div class="modalt">  
<div class="left">Название модального окна</div>  
<a class="close-reveal-modal">X</a>  
</div>  
<div class="modalc">  
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.  
</div>  
</div>  
<script src="http://for-ucoz.my1.ru/scripts/modal/jquery.reveal.js" type="text/javascript"></script>

2.1 Версия стилей с затемнением фона:
Код
.reveal-modal-bg {position:fixed; height:100%; width:100%; background:#000; background:rgba(0,0,0,.8); z-index:100; display:none; top:0; left:0;}  
.modal {background:#fff; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:2px solid #f4f4f4; visibility:hidden; left:50%; top:40%; -webkit-transform:translateX(-50%) translateY(-50%); -moz-transform:translateX(-50%) translateY(-50%); transform:translateX(-50%) translateY(-50%); margin:0 auto; position:fixed; z-index:2000;}  
.modalt {height:30px; border-bottom:2px solid #f4f4f4;}  
.modalt .left {float:left; line-height:30px; padding:0 0 0 6px; font-family:Calibri; font-size:12px; color:#3b5998;}  
.modalt .close-reveal-modal {width:18px; height:18px; border-radius:3px; margin:7px 5px 0 0; background:#f4f4f4; text-align:center; font-size:10px; color:#5d5d5d; line-height:18px; float:right; cursor:pointer;}  
.modalt .close-reveal-modal:hover {background:#3b5998; color:#fff;}  
.modalc {padding:8px; color:#5d5d5d; font-family:Calibri; font-size:12px;}

2.2 Версия стилей без затемнения фона:
Код
.modal {background:#fff; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:2px solid #f4f4f4; visibility:hidden; left:50%; top:40%; -webkit-transform:translateX(-50%) translateY(-50%); -moz-transform:translateX(-50%) translateY(-50%); transform:translateX(-50%) translateY(-50%); margin:0 auto; position:fixed; z-index:2000;}  
.modalt {height:30px; border-bottom:2px solid #f4f4f4;}  
.modalt .left {float:left; line-height:30px; padding:0 0 0 6px; font-family:Calibri; font-size:12px; color:#3b5998;}  
.modalt .close-reveal-modal {width:18px; height:18px; border-radius:3px; margin:7px 5px 0 0; background:#f4f4f4; text-align:center; font-size:10px; color:#5d5d5d; line-height:18px; float:right; cursor:pointer;}  
.modalt .close-reveal-modal:hover {background:#3b5998; color:#fff;}  
.modalc {padding:8px; color:#5d5d5d; font-family:Calibri; font-size:12px;}

3. Вставить ссылку в нужное место для открытия окна:
Код
<a href="#" data-reveal-id="myModal">Открыть окно</a>
Источник: wabes.ru
Загрузка данных...
Материал «Модальное окно для uCoz» ещё никто не комментировал.
Добавлять комментарии могут только зарегистрированные пользователи.
Войдите на сайт или Зарегистрируйтесь
Мини-чат
Для добавления необходима авторизация
Наш опрос
Вы к нам еще вернетесь?
439 ответов
Архив
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Никого нету
Сегодня нас посетили
© 2012-2018 «For-uCoz». Дизайн и верстка Snoopak Хостинг от uCoz