Главная » Файлы » Прочие скрипты » jQuery
Создаём модальные окна с плавным появлением и исчезанием на jQuery для uCoz
22.06.14, 19:56:55



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

Установка:

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

Вставьте в блок следующий код:
Код
<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) Оформление модальных окон

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

В нём мы будем прописывать оформления для каждого отдельного окна. К примеру, код первого окна будет у нас примерно таким:
Код
<div id="static1" style="display:none;" class="window" align="center">
  Код в модальном окне  
  </div>


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

Вот вам пример моей формы входа:
Код
<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) Вот так прописываем ссылку для нашего первого окна:
Код
<a href="#static1" name="modal">Ссылка на форму входа</a>


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

Вот, вроде бы и всё. Надеюсь, найдёте применение
Категория: jQuery | Добавил: Apocalypse | Теги: исчезанием, плавным, Создаём, появлением, ucoz, на, JQuery, модальные, окна, для
Просмотров: 403 | Загрузок: 0 | Комментарии: 1 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: