Sweet Alert — это красивый эффект напоминания, который заменяет традиционный Javascrip{filter}t Alert. SweetAlert автоматически центрирует и выравнивается по центру страницы, поэтому выглядит отлично, независимо от того, используете ли вы настольный компьютер, телефон или планшет. Кроме того, доступен широкий спектр вариантов индивидуальной конфигурации для гибкого управления.
Как использовать:
Знакомство с:
<scrip{filter}t src="dist/sweetalert.min.js"></scrip{filter}t> <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
swal({ title: "Error!", text: "Вот моё сообщение об ошибке!", type: "error", confirmButtonText: "Cool" }); 
sweetalert-master.zip
(650.13 KB, Количество скачиваний: 9, 售价: 2 粒MB)
Аргумент
| Значение по умолчанию |
Descrip{filter}tion
| | Название | Null (требуется) | Название модаля. Его можно либо добавить в объект под ключом «title», либо передать как первый параметр функции. | | СМС | недействительный | A descrip{filter}tion for the modal. Его можно либо добавить к объекту под клавишой «text», либо передать как второй параметр функции. | | тип | недействительный | Тип модаля. В SweetAlert есть 4 встроенных типа, которые показывают соответствующую анимацию иконок: "Предупреждение", "Ошибка", "Успех" и "инфо". Вы также можете установить его как "Вход" чтобы получить модаль подсказки. Его можно либо ввести в объект под клавишу «type», либо передать как третий параметр функции. | | allowEscapeKey | true | Если установлен наtrue, пользователь может отменить модаль, нажав клавишу Escape. | | customClass | недействительный | Кастомный CSS-класс для модаля. Его можно добавить в объект под клавишой "customClass". | | allowOutsideClick | false | Если установлен наtrue, пользователь может отклонить модаль, кликнув вне него. | | showCancelButton | false | Если установлен наtrue, появится кнопка «Отмена», на которую пользователь может нажать и отменить модаль. | | showConfirmButton | true | Если установлен наfalse, кнопка «OK/Confirm» будет скрыта. Обязательно установите таймер или allowOutsideClick в true при использовании этой функции, чтобы не раздражать пользователя. | | confirmButtonText | «Ладно» | Используйте это, чтобы изменить текст на кнопке «Подтвердить». Если showCancelButton установлен как true, кнопка подтверждения автоматически покажет «Подтвердить» вместо «OK». | | confirmButtonColor | «#AEDEF4» | Используйте это, чтобы изменить цвет фона кнопки «Подтвердить» (должно быть значение HEX). | | cancelButtonText | «Отменить» | Используйте это, чтобы изменить текст на кнопке «Cancel». | | closeOnConfirm | true | Установлен наfalseесли вы хотите, чтобы модаль оставался открытым, даже если пользователь нажимает кнопку «Подтвердить». Это особенно полезно, если функция, прикреплённая к кнопке «Подтвердить», — это другой SweetAlert. | | closeOnCancel | true | То же самое, что и closeOnConfirm, но для кнопки отмены. | | imageUrl | недействительный | Добавьте кастомную иконку для модаля. Должна содержаться строка с путь к изображению. | | imageРазмер изображения | «80x80» | Если imageURL установлен, вы можете указать imageSize, чтобы показать, каким размером иконка должна быть в пикселях. Передайте строку с двумя значениями, разделёнными буквой «x». Первое значение — ширина, второе — высота. | | таймер | недействительный | Таймер автоматического закрытия модаля. Действие происходит в мс (миллисекунды). | | html | false | Если установлено true, параметры заголовка и текста не будут уходить. (Установите ложное, если вас беспокоят XSS-атаки.) | | Анимация | true | Если установлен наfalse, анимация модала будет отключена. Возможные (строки) значения:поп(по умолчанию, когда анимация установлена на true),Слайд с вершины, Слайд снизу | | inputType | «сообщение» | Измените тип входного поля при использованииtype: "input"(Это может быть полезно, если вы хотите, чтобы пользователи ввели пароль, например). | | inputPlaceholder | недействительный | При использовании типа ввода можно задать заполняющий элемент, который поможет пользователю. | | inputValue | недействительный | Укажите значение текста по умолчанию, которое вы хотите, чтобы ваш ввод отображался при использованииtype: "input" | | showLoaderOnConfirm | false | Установлен наtrueчтобы отключить кнопки и показать, что что-то загружается. |
|
Опубликовано 24.12.2015 12:00:48
|
|
|
|
Хозяин|
Опубликовано 25.02.2017 18:36:23
|
Опубликовано 08.12.2017 15:20:55