Forum

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

Дата: Понедельник, 23.08.2010, 5:04 PM | Сообщение # 1

admin

Группа: Друзья

Сообщений: 633

Статус: Offline

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

Установка:

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

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

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. У меня этот код $GLOBAL_MODAL$.

2) Оформление модальных окон

Создайте ещё один глобальный блок, назовите его, допустим, NODAL1 и вставим в последствии код $GLOBAL_MODAL1$ так же на всех страницах после нашего $GLOBAL_MODAL$.

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

Code

<div id="static1" style="display:none;" class="window" align="center">
  Код в модальном окне
  </div>

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

Вот вам пример моей формы входа:

Code

<div id="static1" style="display:none;" class="window" align="center">
  <table width="400" height="200" cellspacing="0">
  <tr><td background="http://apocalypse.ucoz.kz/modal/modal_login.png">
  <center>
  $LOGIN_FORM$
  </center>
  </td></tr>
  </table>
  </div>

Надеюсь, здесь всё понятно. Теперь посмотрим, как прописать ссылки для каждого из окон:

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

Code

<a href="#static1" name="modal">Ссылка на форму входа</a>

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

Вот, вроде бы и всё. Надеюсь, найдёте применение

<a href="http://ringtonclub.ru/"><b>Бесплатные рингтоны для мобилы</b></a>