jquaryでのオリジナルダイアログの条件分岐

alert()のように条件分岐したい

ワイの覚書きシリーズ

ある程度サイトを構築してくると、確認ダイアログのデザインにまでこだわりたくなるのはあるあるです。
今回はpromiseを利用してオリジナルダイアログで条件分岐できるコールバック関数を作成します。

▽ダイアログ関数

function pop_listener(mes){
        $('.popup_title').html(mes);
        $('.popup_group').fadeIn(200);
        var promise = new Promise((resolve) => {
            document.querySelector('.pop_submit').addEventListener("click", () => {
                $('.popup_group').fadeOut(200);
                resolve(true);
            });
            document.querySelector('.pop_cancel').addEventListener("click", () => {
                $('.popup_group').fadeOut(200);
                resolve(false);
            });
        });
        return promise;
    }

　
▽ダイアログの表示

$('.click').on('click', function(){
        pop_listener('発行しますか？')
        .then((judge) => {
            if(judge){
                window.location.href = 'https://example.com'
            }
        });
    });

Classに「click」を持つ要素がクリックされると発火。
pop_listenerでは引数に指定されたメッセージに書き換え、ユーザーがClassに「pop_submit」を持つ要素をクリックすればexample.comへリダイレクト、「pop_cancel」を持つ要素をクリックすればそのままダイアログをフェードアウト。

結構頻繁に使うダイアログは関数にまとめておくと楽です。