|
   |
| Форум » Всё для uCoz » Скрипты для uCoz » Ajax окна » Модальное окно с красивыми эффектами (Модальное окно на основе jQuery) |
| Модальное окно с красивыми эффектами |
grendmaster - Offline
Дата: Четверг, 15.03.2012, 20:05 | Сообщение # 1  Вы можете посмотреть эффекты окна на DEMO Установка: Для начала качаем архив с файлами и заливаем на сайт в одноимённые папки Далее ставим этот код перед закрывающим тегом </body> : Код <div id="box"> <div id="dialog" class="window rad shadow"> $GLOBAL_MODAL$ </div> </div> <div id="mask"></div> <script language="javascript" src="/js/modal.js"></script> Далее в <head>(суда)</head> добавляем ссылку на стили для нашего окна: Код <link href="/css/modal-css.css" rel="stylesheet" type="text/css" media="screen" /> Далее создаём глобальный блок с названием MODAL и вставляем в него следующий код: Код <div id="title-modal">Заголовок <div id="close"><a href="#" class="close"><img src="/images/close.png" /></a></div> </div> <div align="center"> Здесь Ваш текст или код который Вы будете выводить в этом окне! </div> Вместо слова "Заголовок" - пишем название Вашего окна (например "Профиль"). Вместо текста Здесь Ваш текст или код который Вы будете выводить в этом окне! вставляем нужный вам код (например код мини-профиля) и сохраняем. Далее в нужном Вам месте сайта вставляем ссылку для открытия окна: Код <a href="#dialog" name="modal">Открыть окно</a> Текст "Открыть окно" заменяем на свой и сохраняем. Вот собственно и всё.  P.s. Размер окна регулируется в файле modal.css в строчках: [Table]#box .window { position:fixed; left:0; top:0; width:300px; height:200px; display:none; z-index:9999; padding:0px; } #box #dialog { background-color:#181818; color: #CCC; width:300px; height:200px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; }[/Table] Сообщение отредактировал grendmaster - Пятница, 16.03.2012, 10:13
 |
| |||
| |||