4.9 KiB
| title | localeTitle |
|---|---|
| Popup Boxes | Всплывающие окна |
Всплывающие окна
Всплывающие окна (или диалоговые окна) - это модальные окна, используемые для уведомления или предупреждения пользователя или для ввода данных от пользователя.
Всплывающие окна запрещают пользователю получать доступ к другим аспектам программы до тех пор, пока всплывающее окно не будет закрыто, поэтому их не следует злоупотреблять.
Существует три разных типа всплывающих методов, используемых в JavaScript: window.alert () , window.confirm () и window.prompt () .
бдительный
Метод предупреждения отображает сообщения, которые не требуют от пользователя ввода ответа. После вызова этой функции появится диалоговое окно предупреждения с указанным (необязательным) сообщением. Пользователи должны будут подтвердить сообщение до того, как предупреждение исчезнет.
Пример:
window.alert("Welcome to our website");
подтвердить
Метод подтверждения похож на window.alert() , но также отображает кнопку отмены во всплывающем окне. Кнопки возвращают логические значения: true для OK и false для Cancel.
Пример:
var result = window.confirm('Are you sure?');
if (result === true) {
window.alert('Okay, if you're sure.');
} else {
window.alert('You seem uncertain.');
}
Незамедлительный
Метод подсказки обычно используется для получения текстового ввода от пользователя. Эта функция может принимать два аргумента, оба из которых являются необязательными: сообщение для отображения пользователю и значение по умолчанию для отображения в текстовом поле.
Пример:
var age = prompt('How old are you?', '100');
Другие варианты дизайна:
Если вы недовольны всплывающими надписями JavaScript по умолчанию, вы можете заменить их в различных библиотеках пользовательского интерфейса. Например, SweetAlert обеспечивает приятную замену стандартным JavaScript-модалам. Вы можете включить его в свой HTML через CDN (сеть доставки контента) и начать использовать.
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
Синтаксис таков: swal(title, subtitle, messageType)
swal("Oops!", "Something went wrong on the page!", "error");
В приведенном выше коде будет отображаться следующее всплывающее окно: 