• Страница 1 из 1
  • 1
Модальное окно jQuery
StranNiKДата: Вторник, 08.01.2013, 23:11 | Сообщение # 1

Группа: Администраторы
Сообщений: 129
Репутация: 12
Статус:
Награды
За создание сайта За хорошую репутацию За 100 Сообщений
Многие уже встречали такие окна на сайтах, но не знают как их реализовать. Данная инструкция поможет Вам сделать такое окно у себя на сайте...
DEMO

Для начала качаем архив с файлами и заливаем на сайт в одноимённые папки
Далее такой код:
Код
<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>

и добавляем в шаблон сайта перед закрывающим тегом </body>
Далее в 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 в строчках:
width:300px; height:200px;
     
Прикрепления: Modal.rar (12.4 Kb)
 
  • Страница 1 из 1
  • 1
Поиск: