JavaScript
モーダル - プロンプト

構文

• アラート（メッセージ）
• 確認する（メッセージ）
• prompt（メッセージ[、optionalValue]）
• print（）

備考

ユーザープロンプトについて

ユーザプロンプトは、確認や入力などのユーザアクションを要求するブラウザモーダルを呼び出すために使用されるWebアプリケーションAPIの一部です。

window.alert(message)

ユーザーにメッセージを表示するモーダルポップアップを表示します。
ユーザーに[OK]をクリックする必要があります。

alert("Hello World"); 

詳しくは、「アラートの使用（）」を参照してください。

boolean = window.confirm(message)

提供されたメッセージでモーダルポップアップを表示します。
ブール値true / falseそれぞれ応答する[OK]および[キャンセル]ボタンを提供します。

confirm("Delete this comment?");

result = window.prompt(message, defaultValue)

提供されたメッセージとオプションの事前入力値を持つ入力フィールドを持つモーダルポップアップを表示します。
ユーザーが入力値を指定したresult返します。

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

「prompt（）の使用法」の以下の情報を参照してください。

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デモ

エレメントの削除を確認する

confirm()を使う方法は、いくつかのUIアクションがページのいくつかの破壊的な変更を行い、 通知やユーザの確認を伴う方が良い（つまり、投稿メッセージを削除する前のように）

<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デモ

alert（）の使用法

windowオブジェクトのalert()メソッドは、指定されたメッセージとOKまたはCancelボタンを含む警告ボックスを表示します。そのボタンのテキストはブラウザによって異なり、変更することはできません。

構文

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

プロデュース

ユーザーに情報が確実に届くようにするには、 アラートボックスを使用することがよくあります。

注：アラートボックスは、現在のウィンドウからフォーカスを外し、ブラウザにメッセージを強制的に読み取らせます。ボックスが閉じられるまで、ユーザーがページの他の部分にアクセスするのを防ぐので、このメソッドを過度に使用しないでください。また、ユーザーが[ OK]をクリックするまで、コードの実行を停止します。 （特に、 setInterval()またはsetTimeout()設定されたタイマーは、どちらもチェックされません）。アラートボックスはブラウザでのみ機能し、そのデザインは変更できません。

戻り値

alert関数は値を返しません

prompt（）の使用法

プロンプトは入力を要求するダイアログを表示します。テキストフィールドの上に置かれるメッセージを提供することができます。戻り値は、ユーザーが指定した入力を表す文字列です。

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

また、プロンプトのテキストフィールドにデフォルトのテキストとして表示される第2パラメータをprompt()渡すこともできます。

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