Скрипты и шаблоны для uCoz - 3aKa4Ka
Каталог файлов | Иконки групп | Видео уроки | Статьи | PSD исходники | SEO софт/программы | SEO новости
Скрипты для uCoz Шаблоны для uCoz

Меню сайта
Новое на форуме ↓
Новые комментарии
Кто на сайте
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Сайт сегодня посетили:

Модальное окно голубого цвета с красивым эффектом

Главная » Скрипты для uCoz » Модальное окно голубого цвета с красивым эффектом
Модальное окно голубого цвета с красивым эффектом для uCoz

Установка:
Это вставляем в <head>:
Code
<script type="text/javascript" src="http://rucoz.com/img/other/okno/js/jquery-1.3.2.min.js"></script>
<script>

$(document).ready(function() {  

  //select all the a tag with name equal to modal
  $('a[name=modal]').click(function(e) {
  //Cancel the link behavior
  e.preventDefault();
  //Get the A tag
  var id = $(this).attr('href');
   
  //Get the screen height and width
  var maskHeight = $(document).height();
  var maskWidth = $(window).width();
   
  //Set heigth and width to mask to fill up the whole screen
  $('#mask').css({'width':maskWidth,'height':maskHeight});
   
  //transition effect  
  $('#mask').fadeIn(1000);  
  $('#mask').fadeTo("slow",0.8);  
   
  //Get the window height and width
  var winH = $(window).height();
  var winW = $(window).width();
   
  //Set the popup window to center
  $(id).css('top', winH/2-$(id).height()/2);
  $(id).css('left', winW/2-$(id).width()/2);
   
  //transition effect
  $(id).fadeIn(2000);  
   
  });
   
  //if close button is clicked
  $('.window .close').click(function (e) {
  //Cancel the link behavior
  e.preventDefault();
  $('#mask, .window').hide();
  });  
   
  //if mask is clicked
  $('#mask').click(function () {
  $(this).hide();
  $('.window').hide();
  });  
   
});

</script>

Это вставляем в ваше CSS:
Code
#mask {position:absolute;left:0;top:0;z-index:9000;background-color:#000;display:none;}
#boxes .window {position:absolute;left:0;top:0;width:440px;height:240px;display:none;z-index:9999;}
#boxes #dialog {width:375px; height:243px;padding-right:12px;padding-left:10px;padding-bottom:10px;background:url(http://rucoz.com/img/other/okno/images/fonsupport.png) no-repeat 0 0 transparent;}
#boxes #dialog1 {width:375px; height:203px;}
#dialog1 .d-header {background:url(http://rucoz.com/img/other/okno/images/login-header.png) no-repeat 0 0 transparent; width:375px; height:150px;}
#dialog1 .d-header input {position:relative;top:60px;left:100px;border:3px solid #cccccc;height:22px;width:200px;font-size:15px;}

В любое место в <body>
Code
<div id="boxes">  
<div id="dialog" class="window">  
<p align="right"><a class="close" href="#"><img src="http://rucoz.com/img/other/okno/images/close.gif"></a></p>
Ваш текст. Профиль, реквизиты или что то еще.<br>
<a href="http://rucoz.com">Скрипты и шаблоны для uCoz</a><br> rucoz.com
</div></div>  
<div id="mask"></div>

Это ссылка для открытия окна, вставляем там где хотим видеть ссылку:
Code
<a href="#dialog" name="modal">RuCoz.com</a>

Вот и все готово

Просмотров: 946 | Комментариев: 1 | Опубликовал: DizeL | Дата: 23.10.2010

 26.09.2009   

 

 Персональная страни... 

 08.11.2009   

 

 Перейти на нужную с... 

 14.03.2010   

 

 flash часы 

 20.04.2011   

 

 Мини-профиль + форм... 

 07.11.2009   

 

 Проверка тем на дуб... 

 06.11.2009   

 

 (Profile, лс...) на... 

 07.10.2010   

 

 Компактная статисти... 

 14.12.2010   

 

 Дополнительные поля... 

 30.11.2009   

 

 Мониторинг css серв... 

 31.01.2010   

 

 Простенькое меню са... 

 05.11.2009   

 

 Новая персональная ... 

 20.12.2009   

 

 Мини профиль как на... 

 07.11.2009   

 

 Загрузка файлов в a... 

 06.11.2009   

 

 Скрипт новости по т... 

 15.11.2010   

 

 Скрипт баллов для u... 

 18.11.2013   

 

 Радио Общага ФМ для... 

 13.11.2010   

 

 Новый минипрофиль 

 12.02.2012   

 

 Список категорий/ра... 

 05.11.2009   

 

 Сообщение о не рабо... 

 14.09.2010   

 

 Выводим файлы на гл... 

 20.11.2009   

 

 Иконка RSS в браузе... 

 12.02.2012   

 

 Торрент трекер на u... 

 08.11.2009   

 

 Иконка поста - u.po... 

 16.05.2011   

 

 Антимат для форума 

 01.12.2009   

 

 Время нахождения на... 

 28.02.2014   

 

 Красочный КВ скрипт... 

 23.02.2010   

 

 Стена пользователя ... 

 20.09.2010   

 

 Горизонтальное меню... 

 04.11.2009   

 

 Мини профиль by Fab... 

 08.01.2010   

 

 Репутация полоской ... 

 27.10.2009   

 

 Ссылка на источник ... 

 27.10.2009   

 

 Меню для сайта 

 20.09.2009   

 

 Пароль на страницу 

 16.04.2010   

 

 Замена в админ баре... 

 18.12.2009   

 

 Новое на форуме как... 

 07.11.2009   

 

 Новая красивая стра... 

 14.12.2009   

 

 Соц. Закладки+ бону... 

 08.11.2009   

 

 Смотрим то что скры... 

 30.09.2010   

 

 Рекламная лента (Сл... 

 16.09.2009   

 

 Оповещение о новом ... 

 05.11.2009   

 

 Мини-Чат на AJAX ок... 

 07.02.2010   

 

 Фон на иконки на фо... 

 07.05.2011   

 

 Забить ClanWar в Aj... 

 05.12.2009   

 

 Регистрация в AJAX ... 

 13.12.2010   

 

 Дизайнеры форума / ... 

 24.01.2010   

 

 Оживляем серверные ... 

 30.09.2009   

 

 Вид фотоальбома для... 

 28.09.2010   

 

 Замена стандартной ... 

 20.05.2010   

 

 Фоновый звук сайта 

 17.01.2011   

 

 Сворачивание/развор... 

 26.12.2010   

 

 Профиль 

 22.04.2011   

 

 Приятный мини-профи... 

 31.08.2014   

 

 Кнопка наверх в вид... 

 04.12.2009   

 

 Запретить выделение... 

 18.09.2009   

 

 Эффектное гризонтал... 

 08.11.2009   

 

 Вид категорий By ru... 

 20.09.2009   

 

 Вплывающее окно авт... 

 14.10.2009   

 

 Чат:) 

 23.01.2011   

 

 Загрузка изображени... 

 08.10.2009   

 

 Мини профиль 

 16.11.2010   

 

 Перемещение текста(... 

 04.11.2009   

 

 Icq + статус на фор... 

 24.10.2010   

 

 Подсказки всплывающ... 

 30.11.2009   

 

 Статус вашего серве... 

 29.04.2011   

 

 Кнопка "Прикре... 

 13.11.2010   

 

 Делаем красивый пои... 

 07.12.2009   

 

 Вид категорий как н... 

 27.12.2013   

 

 Цветная статистика ... 

 19.09.2009   

 

 новая форма входа 

 08.11.2009   

 

 Подсветка синтаксис... 

 17.09.2009   

 

 Блок - софт для веб... 

 23.01.2011   

 

 Рейтинг + и - как н... 

 13.12.2009   

 

 Авто-регистрация 

 07.12.2013   

 

 Кнопка Вверх и вниз... 

 08.11.2009   

 

 Антимат+антиспам дл... 

 20.01.2014   

 

 Всплывающий мини-ча... 

 08.10.2009   

 

 Mail.ru web агент в... 

 23.01.2009   

 

 Изменения В Протоко... 

 11.02.2010   

 

 Просмотр форумa 

 27.01.2011   

 

 Часики вверху стран... 

 14.03.2010   

 

 flash часы 

 03.03.2011   

 

 Измененное ajax окн... 

 23.12.2009   

 

 Новое рекламное мес... 

 02.05.2010   

 

 Растягиваем таблицу... 

 08.11.2009   

 

 Сворачивание и разв... 

 07.11.2009   

 

 Добавления материал... 

 16.09.2009   

 

 Вид новостей v.1.1 

 27.01.2011   

 

 Мне нравиться 

 18.11.2013   

 

 Уведомления о регис... 

 26.09.2009   

 

 Новый вид статистик... 

 01.10.2009   

 

 Раздвижной мини про... 

 30.09.2009   

 

 Доска почёта с нагр... 

 16.11.2010   

 

 Ввод пароля как на ... 

 13.11.2010   

 

 Скрипт файлообменни... 

 17.01.2011   

 

 Топ пользователей н... 

 03.12.2009   

 

 Меняем надпись &quo... 

 17.04.2011   

 

 Новый вид чата для ... 

 11.09.2010   

 

 Новейший мини-профи... 

 17.09.2009   

 

 Аватар в гостевой 

 07.11.2009   

 

 Обманчивое сообщени... 

 23.07.2010   

 

 Сообщение администр... 

Всего комментариев: 1
 
+1 1 DizeL 23.10.2010 23:59:16 Выглядит очень красиво, в него я хотел сделать профиль, но подумал и не стал. Пусть пользователь сам решает Цитировать | Редактировать | Удалить
 

3aKa4Ka.at.ua - портал веб мастеров

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
© 3aka4ka.at.ua 2008 - 2025г. Все материалы размещенные на сайте принадлежат их владельцам и предоставляются исключительно в ознакомительных целях. Администрация ответственности за содержание материала не несет и убытки не возмещает.