JavaScript popup-bokse


Indholdsfortegnelse

    Vis indholdsfortegnelse


JavaScript har tre slags popup-bokse: Alert-boks, Bekræft-boks og Spørg-boks.


Advarselsboks

En advarselsboks bruges ofte, hvis du vil sikre dig, at information kommer igennem til brugeren.

Når en advarselsboks dukker op, skal brugeren klikke på "OK" for at fortsætte.

Syntaks

window.alert("sometext");

Metoden window.alert() kan skrives uden vinduet præfiks.

Eksempel

Prøv det selv →

<!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>

Bekræft boks

En bekræftelsesboks bruges ofte, hvis du ønsker, at brugeren skal bekræfte eller acceptere noget.

Når en bekræftelsesboks popper op, skal brugeren enten klikke på "OK" eller "Annuller" for at fortsætte.

Hvis brugeren klikker på "OK", returnerer boksen sand. Hvis brugeren klikker på "Annuller", vender boksen tilbage falsk.

Syntaks

window.confirm("sometext");

Metoden window.confirm() kan skrives uden vinduespræfikset.

Eksempel

Prøv det selv →

<!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>


Promptboks

En promptboks bruges ofte, hvis du ønsker, at brugeren skal indtaste en værdi, før han går ind på en side.

Når en promptboks dukker op, skal brugeren enten klikke på "OK" eller "Annuller" for at fortsætte efter indtastning af en inputværdi.

Hvis brugeren klikker på "OK", returnerer boksen inputværdien. Hvis brugeren klikker på "Annuller", returnerer boksen null.

Syntaks

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

Metoden window.prompt() kan skrives uden vinduespræfikset.

Eksempel

Prøv det selv →

<!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>

Linjebrud

For at vise linjeskift inde i en pop op-boks skal du bruge en skråstreg efterfulgt af tegnet n.

Eksempel

Prøv det selv →

<!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>