Создаём модальные окна с плавным появлением и исчезанием на jQuery для uCoz


Создаём модальные окна с плавным появлением и исчезанием на jQuer...

1889
8.4 из 10
Проголосовало: 5




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

Установка
1) Создайте глобальный блок с любым именем

Вставьте в блок следующий код:

Code
<div id="mask"></div>  

  <script>  
  $(document).ready(function() {  
  $('a[name=modal]').click(function(e) {  
  e.preventDefault();  
  var top = $(this).offset().top  
  var id = $(this).attr('href');  
  var maskHeight = $(document).height();  
  var maskWidth = $(window).width();  
  $('#mask').css({  
  'width':maskWidth,  
  'height':maskHeight  
  });  
  $('#mask').css('opacity', 0).show();  
  $('#mask').fadeTo(1000,0.85);  
  var winH = $(window).height();  
  var winW = $(window).width();  
  $(id).css('top', winH/2-$(id).height()/2);  
  $(id).css('left', winW/2-$(id).width()/2);  
  $(id).fadeIn(1000);  
  });  

  $('.window .close').click(function (e) {  
  e.preventDefault();  
  $('#mask').fadeOut(1000);  
  $('.window').fadeOut(500);  
  });  

  $('#mask').click(function () {  
  $(this).fadeOut(1000);  
  $('.window').fadeOut(500);  
  });  
   
  });  
  </script>  

  <?if($USER_AGENT$='ie')?>  
  <style>  
  #mask {  
  position:absolute;  
  left:0;  
  top:0;  
  z-index:9000;  
  background-color:#000;  
  display:none;  
  }  
  .window {  
  position:absolute;  
  left:0;  
  top:0;  
  z-index:9999;  
  }  
  </style>  

  <?else?>  

  <style>  
  #mask {  
  position:absolute;  
  left:0;  
  top:0;  
  z-index:9000;  
  background-color:#000;  
  display:none;  
  }  
  .window {  
  opacity:0.8;  
  position:fixed;  
  left:0;  
  top:0;  
  z-index:9999;  
  }  
  </style>  
  <?endif?>

Это блок будет отвечать у нас за все функции модальных окон и код этого блока необходимо прописать на всех страницах,
на которых у вас будут выводиться модальные окна после /head.

2) Оформление модальных окон
В нём мы будем прописывать оформления для каждого отдельного окна. К примеру, код первого окна будет у нас примерно таким:

Code
<div id="static1" style="display:none;" class="window" align="center">  
  <table width="400" height="200" cellspacing="0">  
  <tr><td background="/modal_login.png">  
  <center>  
Код в модальном окне  
  </center>  
  </td></tr>  
  </table>  
  </div>

Здесь разберём поподробнее:
1" - Уникальный идентификатор для каждого окна. Если для первого окна у нас static1, то для второго будет static2, для третьего - static3 и т.д...

3) Вот так прописываем ссылку для нашего первого окна:

Code
<a href="#static1" name="modal">Ссылка для вызова окна</a>

Здесь у нас:
1" - вызывает окно с идентификатором 1

Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://apocalypse.ucoz.kz/
  • Всего комментариев: 1

fallen-star
0
fallen-star написал: Написано 20 Февраля 2012 в 15:49
Комментарий №1
Супеер...

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта 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
    чужих
    Онлайн всего: 5
    Гостей: 4
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: