JQuery модальное окно
827материалов
228тем на форуме
3003комментария
6154пользователя

JQuery модальное окно


В статье я расскажу, как сделать простое JQuery модальное окно. Для кого-то результат окажется только заготовкой, т.к. он не универсален, но с уверенностью можно говорить, что это полноценное модальное окошко. Если Вам нужно одно простое окно на страницу, определенного размера, то это идеальный вариант.

Оформление настолько примитивное, что даже углы не закруглены, но зато есть затемнение фона. Уровень затемнения легко регулируется в CSS, там указывается прозрачность цвета фона у всего слоя. Содержимое JQuery модального окна может быть любое, но за пределы экрана выходить не стоит, по этой причине и регулируются размеры высоты и ширины в CSS.

Модальные окна нужны, чтобы показывать второстепенную информацию на странице. Делается это не только в целях экономии места, но и для того, чтобы излишне не нагружать страницу. Проще будет воспользоваться сворачиванием блоков, но это в итоге «растормошит» контент на сайте и скрытие элементов потеряет свой смысл.

CSS
Код
<style type="text/css">  
#overlay {  
  position:absolute;  
  left:0;  
  top:0;  
  z-index:9000;  
  background-color:rgba(0,0,0,0.8);  
  display:none;  
  font-family: Georgia;  
  }  
#boxes .window {  
  position:fixed;  
  left:0;  
  top:0;  
  display:none;  
  z-index:9999;  
  padding:20px;  
  text-align: center;  
  font-size: 25px;  
  }  
#boxes #dialog {  
  width:400px;  
  height:300px;  
  padding:10px;  
  background-color:#ffffff;  
  text-align:left;  

  }  
.close {  
  position:absolute;  
  margin-left:360px;margin-top:0px;  
  }  

</style>

Селектор «.close» отвечает за кнопку закрытия, это понятно, но эта кнопка и не нужна в принципе, закрываться окно будет и по нажатию на затемненный фон.

В месте, где написано «#boxes #dialog», указываются размеры диалогового окошка, это важный момент. Плюс, указывается padding, а он, как известно, прибавляется к ширине и высоте.

Подключение JQuery
Установите следующий код в секцию <head>своего сайта.
Код
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>


JavaScript
Код
<script type="text/javascript">  
$(document).ready(function() {  
  $('a[name=modal]').click(function(e) {  
  e.preventDefault();  
  var id = $(this).attr('href');  
  var overlayHeight = $(document).height();  
  var overlayWidth = $(window).width();  
  $('#overlay').css({'width':overlayWidth,'height':overlayHeight});  
  $('#overlay').fadeIn(500);  
   
  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(500);  
  });  
  $('.window .close').click(function (e) {  
  e.preventDefault();  
  $('#overlay, .window').fadeOut(200);  
  });  
  $('#overlay').click(function () {  
  $(this).fadeOut(200);  
  $('.window').fadeOut(200);  
  });  
});  
</script>

Скорость появления окна – 500 (что примерно равняется половине секунды), а скорость анимации при закрытии – 200. Такая разница сделана для видимости, чтобы было удобнее редактировать исходный код.

HTML
Код
<a href="#dialog" name="modal">Открыть окно</a>  
<div id="boxes">  
  <div id="dialog" class="window">  
  <a href="#" class="close">Закрыть</a>  
Содержимое окна  
  </div>  
  <div id="overlay"></div>  
</div>

Для того чтобы сделать какую-либо галерею или просто использовать несколько окно на странице, нужно создать JQuery плагин модального диалога или найти такой. Этой заготовки не хватит для таких планов, это всего лишь примитивный пример, урок для начинающего.

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 24.04.2014 в 14:21
Материал просмотрен: 1160 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо
Источник

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта