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

Пользователь

от vicenta_kertzmann , в категории: JavaScript , 9 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от quinton.prosacco , 9 месяцев назад

@vicenta_kertzmann 

Существует несколько способов создания всплывающих окон на jQuery. Один из таких способов - использование плагина Magnific Popup.


Для начала следует подключить библиотеку jQuery и сам плагин Magnific Popup. Это можно сделать с помощью следующих строк кода:

1
2
3
4
5
6






Далее, нужно создать основную структуру всплывающего окна в HTML-коде. Например, так:

1
2
3
4
5
6
Открыть окно


    Заголовок окна
    Текст всплывающего окна


С помощью CSS стилизуем всплывающее окно:

1
2
3
4
5
6
7
8
#my-popup {
  background: #fff;
  padding: 20px;
  width: 400px;
  max-width: 100%;
  margin: 20px auto;
  text-align: center;
}


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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
$(document).ready(function() {
  // Инициализируем плагин Magnific Popup
  $('#my-popup').magnificPopup();
  
  // При клике на кнопку "Открыть окно" 
  $('#open-popup').click(function() {
    // Открываем всплывающее окно анимированно
    $('#my-popup').magnificPopup('open');
  });
});


Готово! Теперь при клике на кнопку "Открыть окно" будет вызываться всплывающее окно с заданным текстом и стилями. Как видно, благодаря использованию плагина Magnific Popup, создание всплывающих окон на jQuery становится очень простым и быстрым процессом.