70 lines
3.3 KiB
Markdown
70 lines
3.3 KiB
Markdown
|
---
|
|||
|
|
title: Popup Boxes
|
|||
|
|
localeTitle: Caixas de pop-up
|
|||
|
|
---
|
|||
|
|
## Caixas de pop-up
|
|||
|
|
|
|||
|
|
Caixas de pop-up (ou caixas de diálogo) são janelas modais usadas para notificar ou avisar o usuário ou para obter entrada do usuário.
|
|||
|
|
|
|||
|
|
Caixas de popup impedem que o usuário acesse outros aspectos de um programa até que o pop-up seja fechado, portanto eles não devem ser usados em demasia.
|
|||
|
|
|
|||
|
|
Existem três tipos diferentes de métodos popup usados em 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) e [window.prompt ()](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) .
|
|||
|
|
|
|||
|
|
### Alerta
|
|||
|
|
|
|||
|
|
O [método de alerta](https://developer.mozilla.org/en-US/docs/Web/API/Window/alert) exibe mensagens que não exigem que o usuário insira uma resposta. Uma vez que esta função é chamada, uma caixa de diálogo de alerta aparecerá com a mensagem especificada (opcional). Os usuários precisarão confirmar a mensagem antes que o alerta desapareça.
|
|||
|
|
|
|||
|
|
### Exemplo:
|
|||
|
|
|
|||
|
|
`window.alert("Welcome to our website");`
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### confirme
|
|||
|
|
|
|||
|
|
O [método confirm](https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm) é semelhante a `window.alert()` , mas também exibe um botão de cancelamento no pop-up. Os botões retornam valores booleanos: true para OK e false para Cancel.
|
|||
|
|
|
|||
|
|
### Exemplo:
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
var result = window.confirm('Are you sure?');
|
|||
|
|
if (result === true) {
|
|||
|
|
window.alert('Okay, if you're sure.');
|
|||
|
|
} else {
|
|||
|
|
window.alert('You seem uncertain.');
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### Pronto
|
|||
|
|
|
|||
|
|
O [método de prompt](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt) é normalmente usado para obter entrada de texto do usuário. Esta função pode ter dois argumentos, sendo ambos opcionais: uma mensagem para exibir ao usuário e um valor padrão a ser exibido no campo de texto.
|
|||
|
|
|
|||
|
|
### Exemplo:
|
|||
|
|
|
|||
|
|
`var age = prompt('How old are you?', '100');`
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### Outras opções de design:
|
|||
|
|
|
|||
|
|
Se você não estiver satisfeito com os pop-ups de JavaScript padrão, poderá substituir em várias bibliotecas de UI. Por exemplo, o SweetAlert fornece um bom substituto para os modais JavaScript padrão. Você pode incluí-lo em seu HTML por meio de um CDN (rede de entrega de conteúdo) e começar a usá-lo.
|
|||
|
|
|
|||
|
|
```HTML
|
|||
|
|
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
A sintaxe é assim: `swal(title, subtitle, messageType)`
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
swal("Oops!", "Something went wrong on the page!", "error");
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
O código acima irá produzir o seguinte popup:  O SweetAlert não é de forma alguma o único substituto para modais padrão, mas é limpo e fácil de implementar.
|
|||
|
|
|
|||
|
|
#### Mais Informações:
|
|||
|
|
|
|||
|
|
* [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)
|