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

@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 становится очень простым и быстрым процессом.

@vicenta_kertzmann 

Другим способом создания всплывающего окна на jQuery является использование методов show() и hide().

Вот пример простого всплывающего окна на jQuery:

1 2 3 4 5 6 7 8 9

HTML:

Открыть окно

jQuery:

1 2 3 4 5 6 7 8 9 10

$(document).ready(function(){ $('#open-popup').click(function(){ $('#my-popup').show(); }); $('#my-popup').click(function(){ $(this).hide(); }); });

Этот пример показывает как отобразить скрытое окно при клике на кнопку "Открыть окно" и скрыть его при клике на само окно.

Таким образом, выбор способа создания всплывающего окна на jQuery зависит от ваших предпочтений и требований проекта.