Всплывающее окно jQuery

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

Создание плавно всплывающего окна с использованием библиотеки jQuery

В HTML создадим ссылку, блок для контента, крестик для закрытия окна и оверлей для затемнения

<a class="myLinkModal" href="#">Анкор_ссылки</a>

<div id="myModal">
  <p>Контент</p>
  <span id="myModal__close" class="close">ₓ</span>
</div>
<div id="myOverlay"></div>

Стилизуем всплывающее окно: зададим ему ширину, высоту, цвет, спозиционируем по центру экрана.

#myModal {
  width: 298px; height: 218px;
  padding: 18px 9px;
  border-radius: 4px;
  background: #fafafa;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: auto;
  display: none;
  opacity: 0;
  z-index: 38;
  text-align: center;
}

Стили кнопки закрытия окна: зададим размеры и спозиционируем в правом верхнем углу.

#myModal #myModal__close {
  width: 21px; height: 21px;
  position: absolute;
  font-size: 29px;
  top: 1px; right: 11px;
  cursor: pointer;
  display: block;
}

Стилизуем затемнение экрана: расположим затемнение на весь экран, цвет чёрный с непрозрачностью 70% и z-index, меньшим, чем у всплывающего окна, чтобы затемнение не перекрывало само окно

#myOverlay {
  z-index: 37;
  position: fixed;
  background: rgba(0,0,0,.7);
  width: 100%; height: 100%;
  top: 0; left: 0;
  cursor: pointer;
  display: none;
}

jQuery код: отменим стандартное событие по клику на ссылку, зададим плавное затемнение при клике на элемент a.myLinkModal (ссылка с классом myLinkModal), а также добавим плавности для закрытия (будет закрываться при нажатии вне всплывающего окна или на крестик)

$(document).ready(function() {
  $('a.myLinkModal').click( function(event){
    event.preventDefault();
    $('#myOverlay').fadeIn(297,	function(){
      $('#myModal') 
      .css('display', 'block')
      .animate({opacity: 1}, 198);
    });
  });

  $('#myModal__close, #myOverlay').click( function(){
    $('#myModal').animate({opacity: 0}, 198, function(){
      $(this).css('display', 'none');
      $('#myOverlay').fadeOut(297);
    });
  });
});

К проекту должен быть подключен jQuery.

Результат

See the Pen Pop-up Window by Nikolay (@Only-to-top) on CodePen.

Изучаем английский
EnglishRussian
EventСобытие
Fade-inПостепенное появление
Fade-outПостепенное исчезновение
OpacityНепрозрачность
admin
16/05/2019 21:51