JavaScript
Модалы - подсказки

Синтаксис

• предупреждение (сообщение)
• подтвердить (сообщение)
• подсказка (сообщение [, optionalValue])
• Распечатать()

замечания

О подсказках пользователя

Пользовательские подсказки - это методы, входящие в API веб-приложений, используемые для вызова модалов браузера, запрашивающих действия пользователя, такие как подтверждение или ввод.

window.alert(message)

Покажите модальное всплывающее окно с сообщением пользователю.
Требуется, чтобы пользователь нажал [OK], чтобы уволить.

alert("Hello World"); 

Более подробную информацию см. В разделе «Использование alert ()».

boolean = window.confirm(message)

Показывать модальное всплывающее окно с предоставленным сообщением.
Предоставляет кнопки [ОК] и [Отмена], которые будут отвечать логическим значением true / false соответственно.

confirm("Delete this comment?");

result = window.prompt(message, defaultValue)

Покажите модальное всплывающее окно с предоставленным сообщением и поле ввода с необязательным предварительно заполненным значением.
Возвращает в result пользователь, предоставив входное значение.

prompt("Enter your website address", "http://");

Более подробная информация приведена в разделе «Использование подсказки ()».

window.print()

Открывает модальный вариант с параметрами печати документа.

print();

Постоянная оперативная модальность

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

<h2>Welcome <span id="name"></span>!</h2>

<script>
// Persistent Prompt modal
var userName;
while(!userName) {
  userName = prompt("Enter your name", "");
  if(!userName) {
    alert("Please, we need your name!");
  } else {
    document.getElementById("name").innerHTML = userName;
  }
}
</script>

jsFiddle demo

Подтвердить удаление элемента

Способ использования confirm() заключается в том, что некоторые действия пользовательского интерфейса совершают некоторые разрушительные изменения на странице и лучше сопровождаются уведомлением и подтверждением пользователя, например, перед удалением сообщения-сообщения:

<div id="post-102">
  <p>I like Confirm modals.</p>
  <a data-deletepost="post-102">Delete post</a>
</div>
<div id="post-103">
  <p>That's way too cool!</p>
  <a data-deletepost="post-103">Delete post</a>
</div>

// Collect all buttons
var deleteBtn = document.querySelectorAll("[data-deletepost]");

function deleteParentPost(event) {
  event.preventDefault(); // Prevent page scroll jump on anchor click
  
  if( confirm("Really Delete this post?") ) {
    var post = document.getElementById( this.dataset.deletepost );
    post.parentNode.removeChild(post);
    // TODO: remove that post from database
  } // else, do nothing
  
}

// Assign click event to buttons
[].forEach.call(deleteBtn, function(btn) {
  btn.addEventListener("click", deleteParentPost, false);
});

jsFiddle demo

Использование предупреждения ()

Метод alert() объекта window отображает окно предупреждения с указанным сообщением и кнопку « ОК» или « Отмена» . Текст этой кнопки зависит от браузера и не может быть изменен.

Синтаксис

alert("Hello world!");
// Or, alternatively...
window.alert("Hello world!");

Производит

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

Примечание. Окно предупреждения отводит фокус от текущего окна и заставляет браузер читать сообщение. Не используйте этот метод слишком сильно, так как он не позволяет пользователю получить доступ к другим частям страницы, пока ящик не будет закрыт. Также он останавливает дальнейшее выполнение кода, пока пользователь не наберет ОК . (в частности, таймеры, которые были установлены с setInterval() или setTimeout() , также не отмечены). Поле предупреждения работает только в браузерах, и его дизайн не может быть изменен.

Возвращаемое значение

функция alert не возвращает никакого значения

Использование подсказки ()

Запрос будет отображать диалог пользователю, запрашивающему их ввод. Вы можете предоставить сообщение, которое будет помещено над текстовым полем. Возвращаемое значение представляет собой строку, представляющую ввод, предоставленный пользователем.

var name = prompt("What's your name?");
console.log("Hello, " + name);

Вы также можете передать prompt() второй параметр, который будет отображаться как текст по умолчанию в текстовом поле приглашения.

var name = prompt('What\'s your name?', ' Name...');
console.log('Hello, ' + name);