QR Код
QR Код на скачивание по второй ссылке
Модальное окно для uCoz
Хороший скрипт модального окна для uCoz. Предусматривает подключение всего 1 скрипта на сайт. Не дает большой нагрузки на сайт. Свободная стилизация окна.
Установка
1. На нужной странице перед установить следующее:
2.1 Версия стилей с затемнением фона:
2.2 Версия стилей без затемнения фона:
3. Вставить ссылку в нужное место для открытия окна:
Установка
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://ucozzz.net/Files/ucoz/script2/jquery.reveal.js" type="text/javascript"></script>
<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://ucozzz.net/Files/ucoz/script2/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;}
.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;}
.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>
- Источник: http://wabes.ru
- Для скачивания необходима авторизация -
Всего комментариев: 0 | |
Последние посты с форума
- Новости сайта
- Написал: admin (02.08.2014)
- У кого какой компьютер
- Написал: admin (10.02.2014)
Лучшие посты на форуме
- Считаем до 1000
- Написал: admin (01.09.2013)
- Игра ассоциации
- Написал: Ooh_la_la (15.03.2011)