Caixas pop-up JavaScript

Índice

    Mostrar índice

JavaScript tem três tipos de caixas pop-up: caixa de alerta, caixa de confirmação e caixa de prompt.

Caixa de alerta

Uma caixa de alerta é frequentemente usada se você quiser garantir que as informações cheguem ao usuário.

Quando uma caixa de alerta aparecer, o usuário deverá clicar em “OK” para prosseguir.

Sintaxe

window.alert("sometext");

O método window.alert() pode ser escrito sem a janela prefixo.

Exemplo

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Alert</h2>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  alert("I am an alert box!");
}
</script>

</body>
</html>

Caixa de confirmação

Uma caixa de confirmação costuma ser usada se você deseja que o usuário verifique ou aceite algo.

Quando uma caixa de confirmação aparecer, o usuário terá que clicar em “OK” ou “Cancelar” para continuar.

Se o usuário clicar em "OK", a caixa retornará true. Se o usuário clicar em "Cancelar", a caixa retornará falso.

Sintaxe

window.confirm("sometext");

O método window.confirm() pode ser escrito sem o prefixo window.

Exemplo

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Confirm Box</h2>


<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var txt;
  if (confirm("Press a button!")) {
    txt = "You pressed OK!";
  } else {
    txt = "You pressed Cancel!";
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

Caixa de prompt

Uma caixa de prompt geralmente é usada se você deseja que o usuário insira um valor antes de entrar em uma página.

Quando uma caixa de prompt aparecer, o usuário terá que clicar em "OK" ou "Cancelar" para prosseguir após inserir um valor de entrada.

Se o usuário clicar em "OK", a caixa retornará o valor de entrada. Se o usuário clicar em "Cancelar" a caixa retornará nulo.

Sintaxe

window.prompt("sometext","defaultText");

O método window.prompt() pode ser escrito sem o prefixo de janela.

Exemplo

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Prompt</h2>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  let text;
  let person = prompt("Please enter your name:", "Harry Potter");
  if (person == null || person == "") {
    text = "User cancelled the prompt.";
  } else {
    text = "Hello " + person + "! How are you today?";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

Quebras de linha

Para exibir quebras de linha dentro de uma caixa pop-up, use uma barra invertida seguida do caractere n.

Exemplo

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>
<p>Line-breaks in a popup box.</p>

<button onclick="alert('Hello\nHow are you?')">Try it</button>

</body>
</html>