ダイアログとはこんなものです、まずは体験してみましょう！
用途はというと、閲覧者に何かしら警告を促したい時に使います。
また記述が短く、動きもシンプルで目立つので、開発の際、要素がちゃんと取得できているかなど、とりあえず何かしらの動作確認をする際に便利です。
サンプルコードの使い方
コード右上のアイコンをクリックすることでコピーできます。
見出しが「サンプルコード」のコードは、空っぽのhtmlファイルにコピペするだけで結果を確認することができます！
それでは本文へ、レッツゴー！
アラートダイアログの書き方
書き方はとっても簡単！
alert('テキスト');これだけでウィンドウが開くと同時に、アラートダイアログが表示されるようになります！
ダイアログ内での改行方法
改行を入れたい場所に「\n」と入れることで、そこが改行されます。
\（バックスラッシュ）は、「option + ¥」で入力することができます。（Mac）
サンプルコード
せっかくなので、最初に体験していただいたボタンでアラートが表示されるコードを紹介します！
<button class="alertButton">クリック！</button>
<script>
document.querySelector('.alertButton').addEventListener('click',function(){
alert('ここに好きな文章を\n入れることができるよ！');
})
</script>querySelectorが分からない方はこちら
addEventListenerが分からない方はこちら
やったぜ
「キャンセル」も選択できるようにしたい
アラートでは「OK」しか出せず、選択肢によって処理を分岐させることはできません。
「OK」か「キャンセル」で処理を分岐させたい場合は、 confirmというものを使います。コンファームについては、別記事で紹介しています！
ダイアログをもっと改造したい！
多分実際使う時になると、もっとこうしたい、ああしたい、が出てくると思います。
しかし残念ながら…。
その場合、もはやアラートに頼るのではなく、自分で1からcssも使って擬似的にダイアログのようなものを作っていくことになります。
細かい説明は省きますが、こんなことができますよというのだけ、サンプルコードで紹介します。
サンプルコード
簡単に説明すると、ダイアログをあらかじめcssで作って隠しておきます。
そしてボタンをクリックすると、隠しておいたダイアログが出てくる。
といった感じです。
<style>
.alertBg{
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;
}
.alertBox{
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;
}
.alertBg.open,
.alertBox.open{
opacity: 1;
pointer-events: auto;
}
</style>
<body>
<button class="alertButton">クリック！</button>
<div class="alertBg"></div>
<div class="alertBox">
<p>こーんな感じ</p>
<button class="alertCloseButton">はぁい</button>
</div>
</body>
<script>
const alertButton = document.querySelector('.alertButton');
const alertCloseButton = document.querySelector('.alertCloseButton');
const alertBg = document.querySelector('.alertBg');
const alertBox = document.querySelector('.alertBox');
alertButton.addEventListener('click', () =>{
alertBg.classList.add('open');
alertBox.classList.add('open');
});
alertCloseButton.addEventListener('click', () =>{
alertBg.classList.remove('open');
alertBox.classList.remove('open');
});
</script>
