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