Сегодня мы разберемся с вами как делать всплывающее окно 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 соответственно).

Понравилась или помогла статья?
Купите мне кофеКупите мне кофе