• Страница 1 из 1
  • 1
Форум » Всё для uCoz » Скрипты для uCoz » Ajax окна » Модальное окно с красивыми эффектами (Модальное окно на основе jQuery)
Модальное окно с красивыми эффектами
grendmaster - Offline
Дата: Четверг, 15.03.2012, 20:05 | Сообщение # 1
Нет аватара
Сообщения: 38

Вы можете посмотреть эффекты окна на 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>

Текст "Открыть окно" заменяем на свой и сохраняем.

Вот собственно и всё. biggrin

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]


Прикрепления: Modal.png(37.9 Kb) · Modal.rar(12.4 Kb)

Сообщение отредактировал grendmaster - Пятница, 16.03.2012, 10:13
yaN - Offline
Дата: Четверг, 15.03.2012, 20:10 | Сообщение # 2
Нет аватара
Сообщения: 1395
оо, супер, лови + в репу happy
grendmaster - Offline
Дата: Четверг, 15.03.2012, 20:12 | Сообщение # 3
Нет аватара
Сообщения: 38
Скажи, а я архив приложил где он?)
=================================
Всё сделал ссылку на скачивание

Сообщение отредактировал grendmaster - Пятница, 16.03.2012, 04:41
OST^Mi_A - Offline
Дата: Суббота, 23.06.2012, 15:26 | Сообщение # 4
Нет аватара
Сообщения: 17
Норм , + те gm
[OST Области Тьмы] Mi_A
Форум » Всё для uCoz » Скрипты для uCoz » Ajax окна » Модальное окно с красивыми эффектами (Модальное окно на основе jQuery)
  • Страница 1 из 1
  • 1
Поиск:
Администрация проекта не несет ответственности за публикуемые материалы.
Дизайн полностью принадлежит "All-CsPro.Ru".
Копирование материалов с сайта без разрешения запрещено. © 2011-2020 Хостинг от uCoz.