jQuery BlockUI Pluginで確認ダイアログ

ちょっと長い処理を実行するときに、時間がかかるから実行中ということがわかる状態にするとあわせて、
他のボタンとかをさわっちゃイヤんなことがあると思います。

そんな時に便利なのが
jQuery BlockUI Plugin
です。

これを使うと、ボタンを押したら画面全体を使えなくしたり、画面の一部だけを使えなくしたりすることができます。

demoがあるので、こちらを見るとどういうものかすぐわかります。

画面を触れないようにできるのは、よいのですが
長い処理をするので、うっかりクリックなどをして後悔しないように
実行するかどうかの確認ダイアログを出したいなぁとか思ってみたのですが、
ちゃんと、確認ダイアログ的なメッセージを出すこともできるようです。

ちゃんとサンプルもあります。

とてもステキなjQuery BlockUI Pluginを確認ダイアログを出す形で使ってみたのですが、私の利用したいケースでサンプルとまったく同じ使い方だとどうもキャンセルしてもsubmitしてしまっているような感じでした。

なので、ちょろっと以下のように変えてみました。

<script type="text/javascript"> 
    $(document).ready(function() { 
 
        $('#test').click(function() { 
            $.blockUI({ message: $('#question'), css: { width: '275px' } }); 
        }); 
 
        $('#yes').click(function() { 
            // update the block message 
            $.blockUI({ message: "<h1>Remote call in progress...</h1>" }); 
            $('#go_go').submit();
        }); 
 
        $('#no').click(function() { 
            $.unblockUI(); 
            return false; 
        }); 
 
    }); 
</script> 
 
... 
<form action="go" id="go_go" > 
<input id="test" type="button" value="Go Go Go" /> 
</form> 
 
... 
 
<div id="question" style="display:none; cursor: default"> 
        <h1>Would you like to contine?.</h1> 
        <input type="button" id="yes" value="Yes" /> 
        <input type="button" id="no" value="No" /> 
</div>