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

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

03.12.201252130

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

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

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

CSS



Code
<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> своего сайта.

Code
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

JavaScript



Code
<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



Code
<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 плагин модального диалога или найти такой. Этой заготовки не хватит для таких планов, это всего лишь примитивный пример, урок для начинающего.

Полезные материалы к статье

  • Не нужно искать плагин модальных окон, мы нашли FancyBox.
  • Подобное JQuery окошко уже было здесь.
  • Оформить модальные окна на JQuery рекомендую в стиле Windows 7.



Сохраните в социальную сеть
Комментарии (0)
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт