【JavaScript】 alert・confirm・promptでダイアログメッセージを表示する
更新日：2022/12/08
ブラウザ上で動作するJavaScriptには、alert/confirm/promptという入力ダイアログを表示するメソッドが用意されています。
今回はこれらのメソッドの使い方と、外観のカスタマイズについてお伝えします。
alertはOKボタンのみ
alertは日本語で警報という意味があります。
JavaScriptでのalertメソッドは、ユーザーになんらかのメッセージを伝えるような場面で使用されます。
使い方
alertメソッドはグローバルオブジェクトのプロパティなので、次のように実行すると、引数として与えた値がブラウザに表示されます。
window.alert("aaa");
グローバルオブジェクトのメソッドはオブジェクト指定を省略できるので、次のように記述できます。
alert("aaa");
ブラウザによって表示が異なる
上で紹介した実行結果は、Firefoxのものです。
chromeの実行結果は、これとはかなり変わっています。
「このページの内容」てなんだかおかしな表現です。
変更したいです。
しかし、外観や表示内容は固定のため、プログラム側で変更できません。
alertの外観を変更する
alertの外観を変更したい場合、自分で一から作成する必要があります。
確認
独自alertの例
↓押してみて！！
JavaScript
const myAlert = (( ) =>{
let alt=null,p=null,btn=null;
window.addEventListener( "DOMContentLoaded" , ()=> {
if( alt !== null ) return;
alt = document.getElementById("alert");
p = alt.querySelector("p");
btn = alt.querySelector("button");
btn.addEventListener("click",()=>alt.style.display="none");
});
return ( text )=>{
p.textContent = text;
alt.style.display="block";
}
})();
この関数は、onclick属性で呼び出すことを考慮しています。
html要素はDOM構築後でないと取得できないので、DOMContentLoadedイベントを待ちます。
CSS
#alert{
display: none;
position: fixed;
background: rgba(0,0,0,.3);
top:0;
left:0;
bottom: 0;
right: 0;
z-index: 100;
}
#alert div{
border: 5px double purple;
box-shadow: 5px 5px 3px rgba(0,0,0,.2);
border-radius: 50%;
padding: 5px;
background: pink;
position: absolute;
width: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
#alertは画面いっぱいに表示することで、リンクなどを押せない状態にしています。
#alert divは、top、left、transformの組み合わせで、画面中央に表示しています。
html
<div id="alert">
<div>
<p></p>
<button>確認しました</button>
</div>
</div>
<button onclick="myAlert('確認')">確認</button>
confirmはOKとキャンセルボタンの二つ
confirmは日本語で確認という意味があります。
confirmメソッドは、OKとキャンセルボタンの二つが表示され、ユーザーがどちらかを選択するのを待ちます。
使い方
alertメソッドと同じように、表示するメッセージを引数として指定します。
const result = confirm("aaa");
ユーザーがOKを選択するとtrueが、キャンセルを選択するとfalseが返ります。
次のように、直接結果を参照するような使い方をするケースが多いです。
if( !confirm("これでいいですか？") ) alert("キャンセルされました");
confirmの外観を変更する
confirmは、alertメソッドと同じように外観を変更することができません。
そこで、confirmと同じ機能を自作してみます。
確認
独自confirmの例
↓押してみて！！
JavaScript
(()=>{
const myConfirm = (( ) =>{
let alt=null,p=null,btn_yes=null,btn_no=null;
window.addEventListener( "DOMContentLoaded" , ()=> {
if( alt !== null ) return;
alt = document.getElementById("confirm");
p = alt.querySelector("p");
btn_yes = alt.querySelector("#confirm-yes");
btn_no = alt.querySelector("#confirm-no");
});
return ( text )=>{
p.textContent = text;
alt.style.display="block";
return new Promise( ( resolve )=>{
const yesEvent = ()=>{resolve(true);removeEvent();}
const noEvent = ()=>{resolve(false);removeEvent();}
const removeEvent = ()=>{
btn_yes.removeEventListener("click",yesEvent);
btn_no.removeEventListener("click",noEvent);
alt.style.display="none";
};
btn_yes.addEventListener("click",yesEvent);
btn_no.addEventListener("click",noEvent);
});
};
})();
const myFunc = async ()=>{
const result = await myConfirm("確認");
alert(result); // ①
};
window.addEventListener( "DOMContentLoaded" , ()=> {
document.getElementById("btn").addEventListener("click",()=>{
myFunc(); // ②
});
});
})();
confirmはプログラムコード上で押されたボタンを判断するので、onclick属性で呼び出すことを考慮していません。
ただし、alertとの違いがわかるように流れを流用しています。そのためDOMContentLoadedイベントを2か所で待つようなコードになっています。
JavaScriptは、プログラムコードの流れを止めて、ボタンが押されるのを待つにはasyncとawaitを使用します。
関数myFuncでawaitキーワードと共にmyConfirmを呼び出すと、その後のコード①が保留され、呼び出しもとに戻ります。
呼び出し元のコードはそのまま実行されるので、confirmに関連する処理は、myFuncに記述する必要があります。
CSS
#confirm{
display: none;
position: fixed;
background: rgba(0,0,0,.3);
top:0;
left:0;
bottom: 0;
right: 0;
z-index: 100;
}
#confirm div{
border: 5px double purple;
box-shadow: 5px 5px 3px rgba(0,0,0,.2);
border-radius: 50%;
padding: 5px;
background: pink;
position: absolute;
width: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
CSSは、ID以外はalertと同じです。
html
<div id="confirm">
<div>
<p></p>
<button id="confirm-yes">はい</button><button id="confirm-no">いいえ</button>
</div>
</div>
<button id="btn">確認</button>
promptはユーザーからの文字入力を待つ
promptは日本語で促すという意味があります。
promptメソッドは、文字入力欄とOKとキャンセルボタンが表示され、ユーザーが文字入力するのを促します。
使い方
promptメソッドは、confirmメソッドと同じように表示するメッセージを引数として指定します。
const result = prompt("aaa");
また、第二引数を指定することで、入力文字の初期値を指定できます。
const result = prompt("aaa","これは初期値です");
ユーザーが文字を入力してOKボタンを押すと、入力した文字が返ります。
キャンセルボタンやEscキーが押されると、Nullが返ります。
ただし古いブラウザによっては空文字("")が返ることがあります。
ユーザーが何も入力せずにOKボタンを押したとき空文字が返るので、この場合はキャンセルしたかどうかの判断ができません。
プログラムコードを古いブラウザにも対応させたい場合、promptの使用は慎重におこなう必要があります。
promptの外観を変更する
alertやconfirmと同じように、promptを自作してみます。
入力してください
↓押してみて！！
JavaScript
(()=>{
const myPrompt = (( ) =>{
let alt=null,p=null,btn_yes=null,btn_no=null,input=null;
window.addEventListener( "DOMContentLoaded" , ()=> {
if( alt !== null ) return;
alt = document.getElementById("prompt");
p = alt.querySelector("p");
btn_yes = alt.querySelector("#prompt-yes");
btn_no = alt.querySelector("#prompt-no");
input = alt.querySelector("#prompt-input");
});
return ( text , intialValue = "")=>{
p.textContent = text;
alt.style.display="block";
input.value = intialValue;
return new Promise( ( resolve )=>{
const yesEvent = ()=>{resolve(input.value);removeEvent();}
const noEvent = ()=>{resolve(null);removeEvent();}
const removeEvent = ()=>{
btn_yes.removeEventListener("click",yesEvent);
btn_no.removeEventListener("click",noEvent);
alt.style.display="none";
};
btn_yes.addEventListener("click",yesEvent);
btn_no.addEventListener("click",noEvent);
});
};
})();
const myFunc = async ()=>{
const result = await myPrompt("入力してください");
alert(result);
};
window.addEventListener( "DOMContentLoaded" , ()=> {
document.getElementById("btn").addEventListener("click",()=>{
myFunc();
});
});
})();
入力欄に関する処理が追加されただけで、内容はconfirmとほぼ同じです。
CSS
#prompt{
display: none;
position: fixed;
background: rgba(0,0,0,.3);
top:0;
left:0;
bottom: 0;
right: 0;
z-index: 100;
}
#prompt div{
border: 5px double purple;
box-shadow: 5px 5px 3px rgba(0,0,0,.2);
border-radius: 50%;
padding: 5px;
background: pink;
position: absolute;
width: 250px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
#prompt div p{
margin: 5px auto;
}
CSSは入力欄とボタンが枠内に収まるように調整している他は、confirmとほぼ同じです。
html
<div id="prompt">
<div>
<p></p>
<input id="prompt-input" type="text"><br>
<button id="prompt-yes">OK</button><button id="prompt-no">キャンセル</button>
</div>
</div>
<button id="btn">確認</button>
formタグ内にボタンを設置する場合
form内の送信ボタンを押したときに確認メッセージを表示したいケースがあります。
例えば、この記事のOKとキャンセルボタンで掲載している例を form タグで使用するために、次のようなHTMLを作成したとします。
<div id="confirm">
<div>
<p></p>
<button id="confirm-yes">はい</button><button id="confirm-no">いいえ</button>
</div>
</div>
<form id="form" action="/requesturl" method="post">
<button id="btn">確認</button>
</form>
これを実行すると、「はい」「いいえ」が表示された瞬間に formタグのaction が呼び出されて、画面が遷移します。
つまり、確認画面として機能しません。
対処方法は、まず button タグに type="button"を記述します。
<form id="form" action="/requesturl" method="post">
<button type="button" id="btn">確認</button>
</form>
次に「はい」が選択された時に、手動でsubmitします。
const myFunc = async ()=>{
const result = await myConfirm("確認");
if( result ){
document.getElementById("form" ).submit();
}
else alert(result);
};
これでＯＫ、だと思う…
画面遷移しないで、レスポンスが返ってきたら確認画面を表示したいときは次のページを参考にしてみてください。
更新日：2022/12/08
関連記事
スポンサーリンク
記事の内容について
こんにちはけーちゃんです。
説明するのって難しいですね。
「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。
裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。
掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。
ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php
このサイトは、リンクフリーです。大歓迎です。
