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

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

Как сделать всплывающее окно jquery

Всплывающее окно jquery состоит из таких элементов:

  • фона или затемнения
  • всплывающего окна
  • контента всплывающего окна

Итак, как всегда, сначала приступим к верстке HTML.



Готово, у нас уже есть затемнение (.popup_overlay), всплывающее окно (.popup), заголовок всплывающего окна (.popup_title), кнопка закрытия всплывающего окна (.closer), и содержимое всплывающего окна (.popup_content).

Теперь нам нужно сделать так, чтобы это всплывающее окно отображалось всплывающим, а не просто так, и чтобы затеменение перекрывало фон.

.popup_overlay{
  display: none;
  background: rgba(0,0,0,.9);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.popup{
  display: none;
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,1);
  width: 600px;
  height: 500px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -300px;
  margin-top: -250px;
}
.popup_title{
  font-weight: bold;
  padding: 10px;
}
.popup_content{
  padding: 10px;
  border-top: 1px solid #ccc;
}
.closer{
  float: right;
  cursor: pointer;
}

Готово. Всплывающее окно jquery оформлено. Если заметили, у самого всплывающего окна и у затеменения стоит display: none, это сделано для того, чтобы всплывающее окно не показывалось на сайте до нужного момента. А теперь добавим отображение всплывающего окна в нужный момент (то есть по нажатию на нужную кнопку).

Всплывающее окно jquery
Ну а теперь код на jquery. Все достаточно просто. Привязывем действие на событие клика на нужную кнопку.

$(function(){
  $('button').click(function(){
    $('.popup,.popup_overlay').fadeIn(400); //показываем всплывающее окно
  });
  $('.closer,.popup_overlay').click(function(){
    $('.popup,.popup_overlay').fadeOut(400); //скрываем всплывающее окно
  });
});

Готово. Всплывающее окно будет отображаться и скрываться тогда, когда нам нужно (при нажатии на кнопку button и кнопку .closer соответственно).