3.3 KiB
| title | localeTitle |
|---|---|
| Popup Boxes | 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 () , window.confirm () e window.prompt () .
Alerta
O método de alerta 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 é 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:
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 é 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.
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
A sintaxe é assim: swal(title, subtitle, messageType)
swal("Oops!", "Something went wrong on the page!", "error");
O código acima irá produzir o seguinte popup: 