Время от времени вам нужно будет показывать пользователям окно с предупреждением об ошибке или уведомлении. Проблема с окнами предупреждений по умолчанию, предоставляемыми браузерами, заключается в том, что они не очень привлекательны. Когда вы создаете веб-сайт с великолепными цветовыми комбинациями и причудливой анимацией для улучшения работы ваших пользователей в браузере, неустановленные окна предупреждений будут казаться неуместными.
В этом руководстве вы узнаете о библиотеке SweetAlert2, которая позволяет нам создавать всевозможные предупреждающие сообщения, которые можно настроить в соответствии с внешним видом нашего веб-сайта.
Отображать простые оповещения
Прежде чем вы сможете показать все эти приятные предупреждающие сообщения своим пользователям, вам необходимо установить библиотеку и включить ее в свой проект. Если вы используете npm или bower , вы можете установить его, выполнив следующие команды:
|
1
2
|
npm install sweetalert2
bower install sweetalert2
|
Вы также можете получить ссылку на CDN для последней версии библиотеки и включить ее в свою веб-страницу с помощью тегов скрипта:
|
1
|
<script src=»https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.all.min.js»></script>
|
Помимо файла JavaScript, вам также необходимо загрузить файл CSS, который используется для стилизации всех окон предупреждений, создаваемых библиотекой:
|
1
|
<link rel=’stylesheet’ href=’https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.min.css’>
|
После того, как вы установили библиотеку, создать приятное предупреждение на самом деле очень легко. Все, что вам нужно сделать, это вызвать swal() . Просто убедитесь, что функция вызывается после загрузки DOM.
Есть два способа создать приятное предупреждение, используя swal() . Вы можете передать заголовок, основной текст и значение значка в трех различных аргументах или передать один аргумент в виде объекта с разными значениями в качестве пар ключ-значение. Передача всего в объекте полезна, когда вы хотите указать значения для нескольких аргументов.
Когда передается один аргумент, и он является строкой, приятное предупреждение будет отображать только заголовок и кнопку ОК. Пользователи смогут щелкнуть в любом месте за пределами оповещения или нажать кнопку ОК, чтобы отклонить его.
Когда передаются два аргумента, первый становится заголовком, а второй — текстом внутри оповещения. Вы также можете отобразить значок в окне предупреждения, передав третий аргумент. Это может иметь любое из пяти предопределенных значений: warning , error , success , info и question . Если вы не передадите третий аргумент, в сообщении не будет отображаться значок.
|
01
02
03
04
05
06
07
08
09
10
11
|
document.querySelector(«.first»).addEventListener(‘click’, function(){
swal(«Our First Alert»);
});
document.querySelector(«.second»).addEventListener(‘click’, function(){
swal(«Our First Alert», «With some body text!»);
});
document.querySelector(«.third»).addEventListener(‘click’, function(){
swal(«Our First Alert», «With some body text and success icon!», «success»);
});
|
Параметры конфигурации для настройки оповещений
Если вы просто хотите показать некоторую основную информацию в окне оповещения, предыдущий пример подойдет. Тем не менее, библиотека может сделать гораздо больше, чем просто показывать пользователям текст сообщения. Вы можете изменить каждый аспект этих предупреждающих сообщений в соответствии со своими потребностями.
Мы уже рассмотрели заголовок, текст и значки внутри сладкого предупреждающего сообщения. Существует также возможность изменить кнопки внутри него и контролировать их поведение. По умолчанию в предупреждении будет только одна кнопка подтверждения с текстом «ОК». Вы можете изменить текст внутри кнопки подтверждения, установив значение свойства confirmButtonText . Если вы также хотите показать кнопку отмены в своих сообщениях оповещений, все, что вам нужно сделать, это установить значение showCancelButton в значение true . Текст внутри кнопки отмены можно изменить с cancelButtonText свойства cancelButtonText .
Каждой из этих кнопок можно присвоить свой цвет фона, используя свойства confirmButtonColor и cancelButtonColor . Цвет по умолчанию для кнопки подтверждения — #3085d6 , а цвет по умолчанию для кнопки отмены — #aaa . Если вы хотите применить любую другую настройку к кнопкам подтверждения или отмены, вы можете просто использовать свойства confirmButtonClass и cancelButtonClass чтобы добавить к ним новый класс. После добавления классов вы сможете использовать CSS для изменения внешнего вида этих кнопок. Вы также можете добавить класс в основной customClass с помощью свойства customClass .
Если вы взаимодействовали с предупреждающими сообщениями в первом примере, вы могли заметить, что модальные окна можно закрыть, нажав клавишу Enter или Escape . Точно так же вы можете также щелкнуть в любом месте за пределами модального, чтобы отклонить его. Это происходит потому, что для значений allowEnterKey , allowEscapeKey и allowOutsideClick по умолчанию установлено значение true .
Когда вы показываете две разные кнопки внутри модальной, кнопка подтверждения является той, которая находится в фокусе по умолчанию. Вы можете удалить фокус с кнопки подтверждения, установив значение focusConfirm в false . Точно так же вы можете также установить фокус на кнопке отмены, установив для focusCancel значение true .
Кнопка подтверждения всегда отображается слева по умолчанию. У вас есть возможность изменить положение кнопок подтверждения и отмены, установив для значения reverseButtons значение true .
Помимо изменения положения и цвета кнопок внутри сообщений оповещения, вы также можете изменить фон и положение сообщения оповещения или фон вокруг него. Кроме того, библиотека также позволяет вам показывать свои собственные значки или изображения в сообщениях с предупреждениями. Это может быть полезно во многих ситуациях.
Вы можете настроить фон сладкого оповещения, используя свойство backdrop . Это свойство принимает в качестве значения логическое значение или строку. По умолчанию фон предупреждающего сообщения состоит в основном из прозрачного серого цвета. Вы можете полностью скрыть это, установив значение backdrop на false . Точно так же вы можете также показывать свои собственные изображения в фоновом режиме, устанавливая значение backdrop в виде строки. В таких случаях все значение backdrop строки присваивается background свойству CSS. Фон сладкого предупреждающего сообщения можно контролировать с помощью свойства background . Все оповещения по умолчанию имеют полностью белый фон.
Все предупреждающие сообщения всплывают в центре окна по умолчанию. Тем не менее, вы можете заставить их всплывать из другого места, используя свойство position . Это свойство может иметь девять различных значений с самоочевидными именами: top , top-start , top-end , center , center-start , center-end , bottom , bottom-start и bottom-end .
Вы можете отключить анимацию, когда появляется модальное окно, установив для свойства animation значение false . Библиотека также предоставляет свойство timer которое можно использовать для автоматического закрытия таймера, когда пройдет определенное количество миллисекунд.
В следующем примере я использовал разные комбинации всех свойств, обсуждаемых в этом разделе, для создания четырех разных сообщений с предупреждениями. Это должно продемонстрировать, как вы можете полностью изменить внешний вид и поведение модала, созданного библиотекой SweetAlert2.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
document.querySelector(«.first»).addEventListener(«click», function() {
swal({
title: «Show Two Buttons Inside the Alert»,
showCancelButton: true,
confirmButtonText: «Confirm»,
confirmButtonColor: «#00ff99»,
cancelButtonColor: «#ff0099»
});
});
document.querySelector(«.second»).addEventListener(«click», function() {
swal({
title: «Are you sure about deleting this file?»,
type: «info»,
showCancelButton: true,
confirmButtonText: «Delete It»,
confirmButtonColor: «#ff0055»,
cancelButtonColor: «#999999»,
reverseButtons: true,
focusConfirm: false,
focusCancel: true
});
});
document.querySelector(«.third»).addEventListener(«click», function() {
swal({
title: «Profile Picture»,
text: «Do you want to make the above image your profile picture?»,
imageUrl: «https://images3.imgbox.com/4f/e6/wOhuryw6_o.jpg»,
imageWidth: 550,
imageHeight: 225,
imageAlt: «Eagle Image»,
showCancelButton: true,
confirmButtonText: «Yes»,
cancelButtonText: «No»,
confirmButtonColor: «#00ff55»,
cancelButtonColor: «#999999»,
reverseButtons: true,
});
});
document.querySelector(«.fourth»).addEventListener(«click», function() {
swal({
title: «Alert Set on Timer»,
text: «This alert will disappear after 3 seconds.»,
position: «bottom»,
backdrop: «linear-gradient(yellow, orange)»,
background: «white»,
allowOutsideClick: false,
allowEscapeKey: false,
allowEnterKey: false,
showConfirmButton: false,
showCancelButton: false,
timer: 3000
});
});
|
Важные методы SweetAlert2
Инициализация различных приятных предупреждающих сообщений для их отображения пользователям — это одно, но иногда вам также потребуется доступ к методам, которые управляют поведением этих предупреждающих сообщений после инициализации. К счастью, библиотека SweetAlert2 предоставляет множество методов, которые можно использовать для отображения или скрытия модального окна, а также для получения его заголовка, текста, изображения и т. Д.
Вы можете проверить, является ли модальный видимым или скрытым, используя метод isVisible() . Вы также можете программно закрыть открытый closeModal() методы close() или closeModal() . Если вам случится использовать один и тот же набор свойств для нескольких предупреждающих сообщений во время их инициализации, вы можете просто вызвать setDefaults({configurationObject}) Метод в начале, чтобы установить значение всех этих свойств одновременно. Библиотека также предоставляет метод resetDefaults() для сброса всех свойств до значений по умолчанию.
Вы можете получить заголовок, содержимое и изображение модального getTitle() используя getTitle() , getContent() и getImage() . Точно так же вы можете также получить HTML, который составляет кнопки подтверждения и отмены, используя getConfirmButton() и getCancelButton() .
Существует множество других методов, которые можно использовать для выполнения других задач, таких как программное нажатие кнопок подтверждения или отмены.
Последние мысли
Библиотека SweetAlert2 позволяет разработчикам легко создавать настраиваемые предупреждающие сообщения для показа своим пользователям, просто устанавливая значения нескольких свойств. Целью этого руководства было раскрыть основы этой библиотеки, чтобы вы могли быстро создавать свои собственные настраиваемые сообщения.
Чтобы пост не стал слишком большим, я рассмотрел только наиболее часто используемые методы и свойства. Если вы хотите прочитать обо всех других методах и свойствах, которые можно использовать для создания расширенных предупреждающих сообщений, вам следует ознакомиться с подробной документацией библиотеки.
Не забудьте также ознакомиться с другими ресурсами JavaScript, которые есть на Envato Market .
Не стесняйтесь, дайте мне знать, если есть что-то, что вы хотели бы, чтобы я разъяснил в этом уроке.