ダイアログとはこんなものです、まずは体験してみましょう！
閲覧者に何かしらを確認したい時に使い、その回答によって異なる処理を行うことができます。
サンプルコードの使い方
コード右上のアイコンをクリックすることでコピーできます。
見出しが「サンプルコード」のコードは、空っぽのhtmlファイルにコピペするだけで結果を確認することができます！
それでは本文へ、レッツゴー！
コンファームダイアログの書き方
コンファームはアラートと同じく、書き方はとってもシンプルです！
confirm('ここにテキスト');ただアラートとは異なり、返り値があります。
OKを選択した場合は真、キャンセルを選択した場合は偽が返ってきます！
アラートとはものすごく簡単にいうと、コンファームの選択肢が「OK」のみになったバージョンです。
選択肢が「OK」しかないので、処理の分岐もありません。警告用ダイアログです。
開発時に便利です。
ダイアログ内での改行方法
改行を入れたい場所に「\n」と入れることで、そこが改行されます。
\（バックスラッシュ）は、「option + ¥」で入力することができます。（Mac）
サンプルコード
先ほど体験していただいたコンファームダイアログのコードを紹介します。
「OK」か「キャンセル」の選択肢によって真偽値が返ってくるので、あらかじめコンファームを変数に格納しておきます。
その変数の結果に応じて、異なる処理を行なっていくという流れです。
<button class="confirmButton">クリック！</button>
<p class="confirmResult"></p>
<script>
// ボタンをクリックすることでイベント発火
document.querySelector('.confirmButton').addEventListener('click',function(){
// ダイアログを表示する。真偽値の結果が欲しいので変数に格納。
const confirmCheck = confirm('ここに好きな文章を\n入れることができるよ！');
// divタグ要素取得（選択した結果を表示させる場所）
const confirmResult = document.querySelector('.confirmResult');
if(confirmCheck){
// 「OK」を選択した場合の処理
confirmResult.innerHTML = '<span style="color:red;">OKを選択しました</span>'
}else{
// 「キャンセル」を選択した場合の処理
confirmResult.innerHTML = '<span style="color:red;">キャンセルを選択しました</span>'
}
});
</script>querySelectorが分からない方はこちら
addEventListenerが分からない方はこちら
cosntが分からない方はこちら
ifが分からない方はこちら
innerHTMLが分からない方はこちら
「OK」か「キャンセル」の選択肢を変更したい
残念ながら変更することはできません。
どうしても変更する必要がある場合、オリジナルのダイアログを作る必要があります。
その際はもはや、コンファームに出番はありません…。
またオリジナルのダイアログを作る場合、選択肢を3つや4つにすることもできます。
ダイアログの画面ももっと改造したいよ！
実際使う時になると、もっとこうしたい、ああしたい、が出てくると思います。
その場合、もはやコンファームに頼るのではなく、自分で1からcssも使って擬似的にダイアログを作っていくことになります。
細かい説明は省きますが、こんなことができますよというのだけ、サンプルコードで紹介します。
サンプルコード
簡単に説明すると、あらかじめダイアログをcssで作って、隠しておきます。
そしてボタンをクリックすると、隠しておいたダイアログが出てくる。
といった感じです。
<style>
.confirmBg{
background-color: rgba(0,0,0,.6);
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: 10;
opacity: 0;
pointer-events: none;
transition: all .2s;
}
.confirmBox{
width: 300px;
height: 150px;
background-color: #fff;
border: solid 1px #000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 20;
opacity: 0;
pointer-events: none;
transition: all .2s;
}
.confirmBg.open,
.confirmBox.open{
opacity: 1;
pointer-events: auto;
}
</style>
<body>
<button class="confirmButton">クリック！</button>
<div class="confirmResult"></div>
<div class="confirmBg"></div>
<div class="confirmBox">
<p>こーんな感じ</p>
<button class="confirmCloseButton1">わかった！</button>
<button class="confirmCloseButton2">わからない！</button>
<button class="confirmCloseButton3">もっかい！</button>
</div>
</body>
<script>
const confirmButton = document.querySelector('.confirmButton');
const confirmCloseButton1 = document.querySelector('.confirmCloseButton1');
const confirmCloseButton2 = document.querySelector('.confirmCloseButton2');
const confirmCloseButton3 = document.querySelector('.confirmCloseButton3');
const confirmBg = document.querySelector('.confirmBg');
const confirmBox = document.querySelector('.confirmBox');
const confirmResult = document.querySelector('.confirmResult');
confirmButton.addEventListener('click', () =>{
confirmBg.classList.add('open');
confirmBox.classList.add('open');
});
confirmCloseButton1.addEventListener('click', () =>{
confirmBg.classList.remove('open');
confirmBox.classList.remove('open');
confirmResult.innerHTML = '<p style="color:red;">やったね！</p>'
});
confirmCloseButton2.addEventListener('click', () =>{
confirmBg.classList.remove('open');
confirmBox.classList.remove('open');
confirmResult.innerHTML = '<p style="color:red;">ごめんなさい</p>'
});
confirmCloseButton3.addEventListener('click', () =>{
confirmBg.classList.remove('open');
confirmBox.classList.remove('open');
confirmResult.innerHTML = '<p style="color:red;">ならもう１回クリック！</p>'
});
</script>
