Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Создание красивых всплывающих сообщений с помощью SweetAlert2

by
Difficulty:BeginnerLength:MediumLanguages:

Russian (Pусский) translation by Anna Goorikova (you can also view the original English article)

Время от времени вам нужно будет показать окно сообщений вашим пользователям, чтобы сообщить им об ошибке или уведомлении. Проблема с окнами сообщений по умолчанию, предоставляемыми браузерами, заключается в том, что они не очень привлекательны. Когда вы создаете веб-сайт с великолепными цветовыми сочетаниями и привлекательной анимацией, чтобы улучшить просмотр для ваших пользователей, не стилизованные всплывающие окна выглядят неуместными.

В этом уроке вы узнаете о библиотеке под названием SweetAlert2, которая позволяет нам создавать все виды всплывающих сообщений, которые могут быть настроены в соответствии с внешним видом нашего веб-сайта.

Отображение простых всплывающих сообщений

Прежде чем вы сможете показать все эти сладкие всплывающие сообщения своим пользователям, вам придется установить библиотеку и включить ее в свой проект. Если вы используете npm или bower, вы можете установить ее, выполнив следующие команды:

Вы также можете получить ссылку CDN для последней версии библиотеки и добавить ее на свою веб-страницу, используя теги скриптов:

Помимо файла JavaScript вам также потребуется загрузить файл CSS, который используется для стилизации всех всплывающих окон, созданных библиотекой:

Как только вы установили библиотеку, создание всплывающего окна на самом деле очень просто. Все, что вам нужно сделать, это вызвать функцию swal(). Просто убедитесь, что функция вызывается после загрузки DOM.

Существует два способа создания всплывающего окна с помощью функции swal(). Вы можете передать название, текст тела и значение значка в трех разных аргументах или передать один аргумент как объект с разными значениями в качестве его пар ключ-значение. Передача всего в объекте полезна, когда вы хотите указать значения для нескольких аргументов.

Когда передается один аргумент, и это строка, во всплывающем окне будет отображаться только заголовок и кнопка «ОК». Пользователи смогут щелкнуть в любом месте вне предупреждения или на кнопке OK, чтобы отменить его.

Когда передаются два аргумента, первый становится заголовком, а второй становится текстом внутри всплывающего окна. Вы также можете показать иконку в окне оповещения, передав третий аргумент. Он может иметь любое из пяти предопределенных значений: warning, error, success, info и question. Если вы не передадите третий аргумент, в всплывающем окне иконка отображаться не будет.

Параметры конфигурации для настройки всплывающих окон

Если вы просто хотите показать некоторую информацию внутри всплывающего окна, предыдущий пример будет очень хорош. Тем не менее, библиотека может сделать намного больше, чем просто показать пользователям некоторый текст внутри всплывающего окна. Вы можете изменить каждый аспект этих всплывающих окон в соответствии с вашими потребностями.

Мы уже рассмотрели заголовок, текст и иконки внутри всплывающего окна. Также есть возможность изменить кнопки внутри окна и контролировать их поведение. По умолчанию всплывающее окно будет иметь только одну кнопку подтверждения с текстом, который говорит «ОК». Вы можете изменить текст внутри кнопки подтверждения, установив значение свойства confirmButtonText. Если вы хотите показать кнопку отмены в своих всплывающих окнах, все, что вам нужно сделать, это установить значение showCancelButton, равным true. Текст внутри кнопки отмены можно изменить с помощью свойства cancelButtonText.

Каждой из этих кнопок можно присвоить другой цвет фона, используя свойства confirmButtonColor и cancelButtonColor. Цвет по умолчанию для кнопки подтверждения - #3085d6, а цвет по умолчанию для кнопки отмены - #aaa. Если вы хотите применить любую другую настройку на кнопках подтверждения или отмены, вы можете просто использовать свойства confirmButtonClass и cancelButtonClass, чтобы добавить к ним новый класс. После добавления классов вы сможете использовать CSS для изменения внешнего вида этих кнопок. Вы также можете добавить класс самому окну, используя свойство customClass.

Если вы покликали по всплывающим окнам в первом примере, вы могли заметить, что их можно закрыть, нажав клавишу Enter или Escape. Аналогично, вы можете щелкнуть в любом месте вне окна, чтобы отклонить его. Это происходит потому, что значения allowEnterKey, allowEscapeKey и allowOutsideClick по умолчанию установлены в true.

Когда вы показываете две разные кнопки внутри всплывающего окна, кнопка подтверждения находится в фокусе по умолчанию. Вы можете удалить фокус с кнопки подтверждения, установив значение focusConfirm в false. Аналогично, вы можете установить фокус на кнопку отмены, установив значение focusCancel, равным true.

По умолчанию кнопка подтверждения всегда отображается слева. У вас есть возможность изменить положение кнопок подтверждения и отмены, установив для параметра reverseButtons значение true.

Помимо изменения положения и цвета кнопок внутри всплывающих окон, вы также можете изменить фон и положение всплывающего окна или фона вокруг него. И не только это, библиотека также позволяет вам показывать свои собственные иконки или изображения в всплывающих окнах. Это может быть полезно во многих ситуациях.

Вы можете настроить фон всплывающего окна, используя свойство backdrop. Это свойство принимает значение Boolean или string. По умолчанию фон всплывающего окна содержит преимущественно прозрачный серый цвет. Вы можете полностью скрыть его, установив значение backdrop в false. Аналогичным образом, вы можете показать свои собственные изображения в фоне, установив значение backdrop в виде строки. В таких случаях всё значение строки backdrop присваивается свойству CSS background. Фон всплывающего окна можно контролировать с помощью свойства background. По умолчанию все всплывающие окна имеют совершенно белый фон.

Все всплывающие окна по умолчанию появляются по центру основного окна. Однако, вы можете заставить их всплывать из другого места, используя свойство position. Это свойство может иметь девять разных значений с понятными именами: top, top-start, top-end, center, center-start, center-end, bottom, bottom-start и bottom-end.

Вы можете отключить анимацию, когда окно всплывает, установив значение свойства animation в false. Библиотека также предоставляет свойство timer, которое можно использовать для автоматического закрытия окна как только пройдет определенное количество миллисекунд.

В следующем примере я использовал разные комбинации всех свойств, обсуждаемых в этом разделе, для создания четырех различных всплывающих окон. Это должно продемонстрировать, как вы можете полностью изменить внешний вид и поведение всплывающего окна, созданного библиотекой SweetAlert2.

Важные методы SweetAlert2

Инициализация различных красивых всплывающих окон, чтобы показать их пользователям, - это одно, но иногда вам также потребуется доступ к методам, которые управляют поведением этих предупреждающих сообщений после инициализации. К счастью, библиотека SweetAlert2 предоставляет множество методов, которые могут использоваться для отображения или скрытия всплывающих окон, а также получения его названия, текста, изображения и т. д.

Вы можете проверить, является ли окно видимым или скрытым с помощью метода isVisible(). Вы также можете программно закрыть открытое окно, используя методы close() или closeModal(). Если вы используете один и тот же набор свойств для нескольких всплывающих окон во время их инициализации, вы можете просто вызвать метод setDefaults({configObject}) в начале, чтобы сразу установить значение всех этих свойств. Библиотека также предоставляет метод resetDefaults() для сброса всех свойств до значений по умолчанию.

Вы можете получить заголовок, контент и изображение всплывающего окна, используя методы getTitle(), getContent() и getImage(). Аналогичным образом, вы можете получить HTML, который составляет кнопки подтверждения и отмены, используя методы getConfirmButton() и getCancelButton().

Существует множество других методов, которые можно использовать для выполнения других задач, таких как программный щелчок на кнопках подтверждения или отмены.

Заключительные мысли

Библиотека SweetAlert2 позволяет разработчикам создавать пользовательские всплывающие окна для показа своим пользователям простой установкой значений нескольких свойств. Это руководство предназначалось для изучения основ этой библиотеки, чтобы вы могли быстро создавать свои собственные оповещения.

Чтобы пост не стал слишком большим, я использовал только наиболее распространенные методы и свойства. Если вы хотите прочитать обо всех других методах и свойствах, которые могут быть использованы для создания расширенных всплывающих окон, вы должны ознакомиться с подробной документацией библиотеки.

Не забудьте проверить другие ресурсы JavaScript, которые есть на Envato Market.

Не стесняйтесь, дать мне знать, если есть что-нибудь, что вы хотели бы, чтобы я разъяснил в этом уроке.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.