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


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

3414
8.4 из 10
Проголосовало: 8




  • Скачать с сервера
  • Скачать
  • Смотреть демо


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

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

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

Code
<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>


и добавляем в шаблон сайта перед закрывающим тегом

Code
</body>


Далее в HEAD добавляем ссылку на стили для нашего окна:

Code
<link href="/css/modal-css.css" rel="stylesheet" type="text/css" media="screen" />


Далее создаём глобальный блок с названием MODAL и вставляем в него следующий код:

Code
<div id="title-modal">Заголовок  
  <div id="close"><a href="#" class="close"><img src="/images/close.png" /></a></div>  
  </div>  
  <div align="center"> Здесь Ваш текст или код который Вы будете выводить в этом окне! </div>


Вместо слова "Заголовок" - пишем название Вашего окна (например "Профиль").
Вместо текста
Здесь Ваш текст или код который Вы будете выводить в этом окне!
вставляем нужный вам код (например код мини-профиля) и сохраняем.
Далее в нужном Вам месте сайта вставляем ссылку для открытия окна:

Code
<a href="#dialog" name="modal">Открыть окно</a>


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

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

P.s. Размер окна регулируется в файле modal.css в строчках:

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


демо
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://lewonchik
  • Всего комментариев: 14

DieHeart
0
DieHeart написал: Написано 18 Апреля 2012 в 16:25
Комментарий №14
а если же я хочу сделать 2 окно с другим текстом создавать еще один блок и делать перессылку на него? можно ли как-нибудь по кароче)

jaguar37rus
0
jaguar37rus написал: Написано 08 Марта 2012 в 14:37
Комментарий №13
вот те 2 примера работы!! оригинал мой вариант!!

есть различия????

Lacr1mosa
0
Lacr1mosa написал: Написано 07 Марта 2012 в 18:22
Комментарий №3
$ENTRY_TITLE$? $IMG_URL1$? $MESSAGE$? это к чему? это же не вид материалов

jaguar37rus
0
jaguar37rus написал: Написано 07 Марта 2012 в 18:33
Комментарий №4
да я в курсе!!!я потом переправил но мое сообщение удалили а это оставили покой то..надо было то оставить а не это

Lacr1mosa
0
Lacr1mosa написал: Написано 07 Марта 2012 в 18:40
Комментарий №5
ааа.....я то думал или я тупой, или вы запутались biggrin

CreativeBoy
+1
CreativeBoy написал: Написано 07 Марта 2012 в 19:34
Комментарий №6
Но источник данного скрипта не вы? Правильно же? Вы же только исправили немножко его

jaguar37rus
-1
jaguar37rus написал: Написано 07 Марта 2012 в 19:41
Комментарий №7
я еще раз повторяю! я присвоил этот скрипт поскольку убрал из него погрешности...

CreativeBoy
0
CreativeBoy написал: Написано 07 Марта 2012 в 19:53
Комментарий №8
Может быть данный скрипт не нуждался в ваших исправлениях? Посудите сами, ведь в демо все прекрасно работает, а я как посмотрел вы просто настроили его под себя! А за исправление чужих скриптов авторство себе не присваивают (возьмите на заметку)

jaguar37rus
-3
jaguar37rus написал: Написано 07 Марта 2012 в 19:57
Комментарий №9
почему не присваивают??? объясни ка мне

CreativeBoy
+1
CreativeBoy написал: Написано 07 Марта 2012 в 20:09
Комментарий №10
Понимаете есть такая штука, как авторство, вот например вам было бы приятно, если бы то, над чем вы трудились, почти голословно присвоил другой человек? Думаю, что это никому бы и не понравилось smile Да, я все конечно понимаю, вы его исправили, но для мелких исправлений не указывают автора, понимаю там php скрипт был бы, и в нем была бы дыра какая-нибудь, но тут исправления очень малы, да и без них скрипт работает smile

jaguar37rus
-2
jaguar37rus написал: Написано 07 Марта 2012 в 20:54
Комментарий №11
но работает то он не коректно! я бы показал ну маеться в лом

CreativeBoy
0
CreativeBoy написал: Написано 07 Марта 2012 в 21:18
Комментарий №12
У вас не корректно, но в демо все работает как и должно, а соответственно скрипт рабочий и не нуждается в исправлениях smile

CreativeBoy
+1
CreativeBoy написал: Написано 07 Марта 2012 в 16:24
Комментарий №1
Почему источник именно ваш сайт? На вашем сайте даже нету этого материала!

jaguar37rus
0
jaguar37rus написал: Написано 07 Марта 2012 в 18:02
Комментарий №2
недачеты убирал кто??? ты???

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 4
    Гостей: 3
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: