Модальное окно на Magnific Popup со своей анимацией | Блог веб-разработчика MaxGraph

Модальное окно на Magnific Popup со своей анимацией

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

Для начала нужно добавить к ссылке, по нажатию на которую откроется окно, специальный дата-атрибут (data-effect). А так же, к самому модальному окну — специальный класс (mfp-with-anim).

1
2
3
4
5
6
<a href="#callback" class="callback open-popup" data-effect="mfp-zoom-in">
  <span>Заказать консультацию</span>
</a>
 
<div class="callback-popup mfp-with-anim" id="callback">
</div>
<a href="#callback" class="callback open-popup" data-effect="mfp-zoom-in">
  <span>Заказать консультацию</span>
</a>

<div class="callback-popup mfp-with-anim" id="callback">
</div>

Затем проинициализируем плагин с нужным кодом.

1
2
3
4
5
6
7
8
9
$('.open-popup').magnificPopup({
  removalDelay: 500, //delay removal by X to allow out-animation
  callbacks: {
    beforeOpen: function() {
      this.st.mainClass = this.st.el.attr('data-effect');
    },
  },
  midClick: true
});
$('.open-popup').magnificPopup({
  removalDelay: 500, //delay removal by X to allow out-animation
  callbacks: {
    beforeOpen: function() {
      this.st.mainClass = this.st.el.attr('data-effect');
    },
  },
  midClick: true
});

Теперь нужно добавить основную магию — css (sass) -код)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.mfp-zoom-in.mfp-bg
  transition: all 0.3s ease-out
  opacity: 0
  
.mfp-zoom-in.mfp-ready.mfp-bg
  opacity: 0.8
 
.mfp-zoom-in .mfp-with-anim
  transition: all 0.2s ease-in-out
  opacity: 0
  transform: scale(0.8) 
    
 
.mfp-zoom-in.mfp-ready
    .mfp-with-anim
    transform: scale(1)
    opacity: 1
 
.mfp-zoom-in.mfp-removing.mfp-bg
    opacity: 0
 
.mfp-zoom-in.mfp-removing
    .mfp-with-anim
    transform: scale(0.8) 
    opacity: 0
.mfp-zoom-in.mfp-bg
  transition: all 0.3s ease-out
  opacity: 0
  
.mfp-zoom-in.mfp-ready.mfp-bg
  opacity: 0.8

.mfp-zoom-in .mfp-with-anim
  transition: all 0.2s ease-in-out
  opacity: 0
  transform: scale(0.8) 
	

.mfp-zoom-in.mfp-ready
	.mfp-with-anim
    transform: scale(1)
    opacity: 1

.mfp-zoom-in.mfp-removing.mfp-bg
	opacity: 0

.mfp-zoom-in.mfp-removing
	.mfp-with-anim
    transform: scale(0.8) 
    opacity: 0

Теперь при открытии модального окна будет интересный эффект скейлящегося окна. Можете найти другие примеры в интернете, или же придумать что-то сами, изменив css-стили.

Метки: , ,

Понравилось? Оцени!
12345 (Пока оценок нет)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *