Свернуть

Новости проекта

Долгожданное открытие студии theRealARTs

Ура! Товарищи,приятная новость, свершилось затянувшееся открытие сайта theRealARTs, занимающегося разработкой в сфере Веб-Дизайна и графики.

Молодой, энергичный, яркий и индивидуальный проект спешит по хвастаться своим открытием и ждет новых посетителей на свой сайт!

12 Января 2015 Подробнее

Наша группа Вконтакте

Мы собираем и публикуем материалы не только на сайте, но и в нашей группе Вконтакте, нужно отметить то, что на сайте публикуются не все материалы, небольшая часть выкладывается только в группе.

17 Марта 2014 Подробнее

Свернуть

Прямой эфир

Пользователь: artCreative

В раздел по теме: Вид материалов как на Pinterest
Пользователь: artCreative

В раздел по теме: Ссылка на источник при копировании текста
Пользователь: muxa

В раздел по теме: Ссылка на источник при копировании текста
Не работает
Пользователь: muxa

В раздел по теме: ОТЛИЧНЫЙ БАНЕР ДЛЯ UCOZ
Все работает класс
Пользователь: muxa

В раздел по теме: Всплывающее меню на чистом CSS
Не работает
Пользователь: muxa

В раздел по теме: Шаблон Фотошоп-Мастер
Пользователь: vovany

В раздел по теме: Уникальная страница технических работ для uCoz

Свернуть

Статистика

Пользователи

Гости сайта

Онлайн
Кто был
СЧ

[Статистика недоступна]

Всего пользователей: 1492 ⁺⁰
Всего материалов [?]: 1434 +

Полный список

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Информеры и модули » Модальное окно jQuery

Модальное окно jQuery

Опубликовал: artCreative™
Категория: Информеры и модули
Дата: 19 Июня 2025 в 09:34

0 голосов

Многие уже встречали такие окна на сайтах, но не знают как их реализовать. Данная инструкция поможет Вам сделать такое окно у себя на сайте...

Для начала качаем архив с файлами и заливаем на сайт в одноимённые папки

Далее пишем такой код:

<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 добавляем ссылку на стили для нашего окна:

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

#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;
}

modal.rar [12,38 Kb] (cкачиваний: 87)

Спонсор материала: Студия Веб-Дизайна RealARTs

Автор файла: lewonchik

Ссылка на источник материала

Для того, чтобы скачивать файлы Вам нужно авторизироваться или зарегистрироваться

Просмотров 1148 | Комментариев: 4 « Назад

Теги материала: jquery, окно, Модальное

Комментарии пользователей

Порядок вывода комментариев:

Like 0
Цитировать

Написано 26 Мая 2013 в 19:59
Комментарий №3

Marinka

Я все делала как тут написано .. также к крестику прописан путь но все равно его нет .Извините ,все работает мешали другие скрипты omg-

Like 0
Цитировать

Написано 26 Мая 2013 в 20:16
Комментарий №4

artCreative™

...

Ну вот и разобрались

Like 0
Цитировать

Написано 26 Мая 2013 в 19:46
Комментарий №1

Marinka

Привет у меня проблема .. У меня в окне нечего не показывает .. даже изначально установив не текста не крестика.. В чем может быть проблема

Like 0
Цитировать

Написано 26 Мая 2013 в 19:51
Комментарий №2

artCreative™

Привет! Если нет крестика, то нужно прописать к нему путь. Если нет текста в окне, наверное сделано не по инструкции. Живой пример на моем сайте. Работает.

Внимание ! У вас нет прав для добавления комментариев.
Пожалуйста авторизуйтесь или зарегистрируйтесь.

E-mail отправителя *:
Тема письма:
Текст сообщения *:

ПАНЕЛЬ УПРАВЛЕНИЯ

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Информеры и модули » Модальное окно jQuery

Модальное окно jQuery

Комментарии пользователей