Vyskakovací okna JavaScriptu

Obsah

    Zobrazit obsah

JavaScript má tři druhy vyskakovacích oken: pole upozornění, pole potvrzení a pole výzvy.

Pole upozornění

Upozornění se často používá, pokud chcete zajistit, aby se informace dostaly k uživateli.

Když se objeví výstražné okno, uživatel bude muset kliknout na „OK“, aby mohl pokračovat.

Syntax

window.alert("sometext");

Metodu window.alert() lze zapsat bez okna předpona.

Příklad

Zkuste to sami →

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

Potvrdit políčko

Potvrzovací pole se často používá, pokud chcete, aby uživatel něco ověřil nebo přijal.

Když se objeví potvrzovací pole, uživatel bude muset pro pokračování kliknout na tlačítko „OK“ nebo „Zrušit“.

Pokud uživatel klikne na „OK“, pole vrátí hodnotu true. Pokud uživatel klikne na „Storno“, pole se vrátí false.

Syntax

window.confirm("sometext");

Metodu window.confirm() lze zapsat bez prefixu okna.

Příklad

Zkuste to sami →

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

Výzva

Výzvové pole se často používá, pokud chcete, aby uživatel zadal hodnotu před vstupem na stránku.

Když se objeví okno s výzvou, uživatel bude muset kliknout na tlačítko "OK" nebo "Zrušit" pokračovat po zadání vstupní hodnoty.

Pokud uživatel klikne na „OK“, pole vrátí vstupní hodnotu. Pokud uživatel klikne na „Storno“, pole vrátí hodnotu null.

Syntax

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

Metodu window.prompt() lze zapsat bez prefixu okna.

Příklad

Zkuste to sami →

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

Přerušení řádků

Chcete-li ve vyskakovacím okně zobrazit zalomení řádků, použijte zpětné lomítko následované znakem n.

Příklad

Zkuste to sami →

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