初心者コーダーのための
HTML/CSS JavaScript PHP WordPress
難しい言葉や概念より、実践重視の入門ブログ
JavaScript

【JavaScript】confirmで確認用ダイアログを表示する方法【改行方法も!】

【JavaScript】ダイアログ 確認ポップアップを表示させよう!

ダイアログとはこんなものです、まずは体験してみましょう!

閲覧者に何かしらを確認したい時に使い、その回答によって異なる処理を行うことができます。

サンプルコードの使い方

コード右上のアイコンをクリックすることでコピーできます。
見出しが「サンプルコード」のコードは、空っぽの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;">ならもう1回クリック!</p>'
    });
</script>