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


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

3523
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 25
Скрипты и модификации для Ucoz 2113
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • sasha2016tv написал:
  • Хороший скрипт
    Ох. Вижу, что обсуждение очень старое. Но!
    На других CMS так же будет все это реализовано. На нормальных CMS.
    Такое решение может подойти лишь для landing сайтов. Но и то, не думаю, что там кто то заморачивается в написании какого либо контроллера генерирования шаблона и используют прямо в лоб чистый HTML, поэтому и будут для каждой страницы свои блоки делать.

    Поэтому лучше тут все же дописать решение именно для ucoz без загрузки этих лишних блоков на странице. Ведь используя условные операторы этот код даже не будет прогружаться на странице. (Лол. Это ж доли секунд загрузки...) И что? Но давайте делать оптимальнее
    Моё авторство:)
  • 1488 написал:
  • 1488 написал:
  • Смысл исходный код? он возвращает после обновление страницы на то положение которое было... или как?
  • 1488 написал:
  • как поставить галки как скрине?
    а то невозможно поставить...
    Последние темы
    Опрос
    433
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: