[jQuery]アラートをOKしたら処理が始まるやつを作る

簡単なやつを。

やりたいこと

ボタンで言えば、クリックしたらポップアップで「本当にやるよ?」がでて、OKを押したら発火する感じ。ポップアップはHTMLで組めるけど、

アラートには種類がある

これと

<button type="button" id="sampleBtn01">click</button>
<script>
    $(function(){
        $('#sampleBtn01').on('click',function(){
            alert('マジで?');
        })
    })
</script>

これ。

<button type="button" id="sampleBtn02">click</button>
<script>
    $(function(){
        $('#sampleBtn02').on('click',function(){
            confirm('マジで?');
        })
    })
</script>

alert()は「OK」だけで、confirm()は「OK」と「キャンセル」がある。

動作前の確認に仕込むならキャンセルができるconfirm()が適している、ということになる。

こうする。

$(function(){
    $('button').on('click',function(){
        if(confirm('マジで?')){
            //OKの動作

        }else{
            //キャンセルの動作

        }
    })
})

簡単ですね。

作例

$(function(){
    $('form').on('submit',function(){
        if(!confirm('マジで?')){
            //OKの動作
            return false;
        }
    })
})

formをsubmitしたときに表示して、OKじゃなかったら処理を中止する。

バリデーションを自作するとかに良さそうですね。

他にも、リストで並べたデータを直接操作(削除とか編集とか)するときに、操作ミスとかをカバーするのに使うと良いかも。

コメント

タイトルとURLをコピーしました