このサンプルは、jQueryのblockUI()プラグインを利用してダイアログを表示します。サンプルの[Show Dialog]ボタンをクリックするとダイアログに「Would you like to continue?」が表示されますので[Yes]をクリックします。すると、wait.aspxを非同期で呼び出します。wait.aspxの処理が完了すると自動的にダイアログを閉じます。wait.aspxはサーバー側で２秒間スリープします。
$(function() {
$().ajaxStop($.unblockUI);
$('#showDialog').click(function() {
$.blockUI({ message: $('#question'), css: { width: '275px'} });
});
$('#yes').click(function() {
$.blockUI({ message: '<h1>Remote call in progress...</h1>' });
$.ajax({
url: 'wait.aspx', // or url: 'wait.php',
cache: false,
complete: function() {
$.unblockUI();
}
});
});
$('#no').bind('click', $.unblockUI);
});
<div style="margin: 10px 0 0 10px;">
<p>
<input id="showDialog" type="submit" value="Show Dialog" />
</p>
<div id="question" style="display: none; cursor: default">
<h3>Would you like to contine?</h3>
<input type="button" id="yes" value="Yes" />
<input type="button" id="no" value="No" />
</div>
</div>