JavaScriptの window.alert() を使って、ボタンクリックでダイアログを表示します。
あまり使うことはないかもしれませんが、そんなアラート表示について解説していきます。
window.alert()
JavaAcriptの window.alert() は、表示されたダイアログを閉じる「OK」 ボタンと指定した文字列を表示させるメソッドです。
window.alert(”ここに表示する内容”);上記のように記述します。
アラート表示は、モーダルウィンドウのような強制力の強いUIで、ユーザーは表示されたダイアログを閉じないとプログラムの他のインターフェイス部分にアクセスする事ができないので、設置するには注意が必要です。
ボタンクリックでアラート表示のサンプル
早速サンプルです。
以下のボタンクリックで、ウィンドウの上部にダイアログが表示されます。
アラート表示が出るサンプルのコード
まずはHTMLですが、クリックイベントでアラート表示を出す為、ボタンにidを振っただけの簡単な記述です。
<button id="deleteBtn1">アラートの表示ボタン</button>そして、JavaScriptは .addEventListener() を使ってクリックをトリガーにして、window.alert() でアラート表示を行います。
document.querySelector('#deleteBtn1').addEventListener('click', () => {
window.alert("アラートの内容を表示\n二行目のテキスト")
});表示する文字列を任意のところで改行する場合、JavaScriptで改行コードの「\n」を挿入すればOKです。
