Всплывающие окна JavaScript

Оглавление

    Показать оглавление

В JavaScript есть три типа всплывающих окон: окно предупреждения, окно подтверждения и окно подсказки.

Оповещение

Поле оповещения часто используется, если вы хотите убедиться, что информация доходит до пользователя.

Когда появится окно с предупреждением, пользователю придется нажать «ОК», чтобы продолжить.

Синтаксис

window.alert("sometext");

Метод window.alert() можно написать без окна. префикс.

Пример

Попробуйте сами →

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

Подтвердить поле

Поле подтверждения часто используется, если вы хотите, чтобы пользователь что-то подтвердил или принял.

Когда появится всплывающее окно подтверждения, пользователю придется нажать «ОК» или «Отмена», чтобы продолжить.

Если пользователь нажимает «ОК», поле возвращает true. Если пользователь нажимает «Отменить», окно возвращается. ложь.

Синтаксис

window.confirm("sometext");

Метод window.confirm() можно написать без префикса окна.

Пример

Попробуйте сами →

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

Подсказка

Поле подсказки часто используется, если вы хотите, чтобы пользователь ввел значение перед входом на страницу.

Когда появится всплывающее окно с подсказкой, пользователю придется нажать «ОК» или «Отмена». продолжить после ввода входного значения.

Если пользователь нажимает «ОК», поле возвращает введенное значение. Если пользователь нажимает «Отмена», поле возвращает значение null.

Синтаксис

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

Метод window.prompt() можно написать без префикса окна.

Пример

Попробуйте сами →

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

Разрывы строк

Чтобы отобразить разрывы строк внутри всплывающего окна, используйте обратную косую черту, за которой следует символ n.

Пример

Попробуйте сами →

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