jQuery UI の Dialog を使って確認用モーダルダイアログを実装するには

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

/*
 * 確認ダイアログ
 *
 * message      : ダイアログのメッセージ本文
 * title        : ダイアログのタイトル
 * buttonok     : OKボタンのテキスト
 * buttoncancel : キャンセルボタンのテキスト
 * response     : コールバック関数を指定する。引数 cancel にボタン選択の結果が入る。
 *                OK ならば false キャンセルならば true となる。
 */
function confirmDialog(message, title, buttonok, buttoncancel, response){
var _dlg = $('<div>'+message+'</div>');
var _buttons = {};
_buttons[buttonok] = function(){$(this).dialog('close');response(false)};
_buttons[buttoncancel]  = function(){$(this).dialog('close');response(true)};
_dlg.dialog({
modal:true,
draggable:false,
title:title,
height:130,
width:320,
buttons:_buttons,
overlay:{ opacity:0.3, background:'#225B7F' }
});
}
/* Sample */
confirmDialog('この処理を続行しますか？', '確認', 'OK', 'キャンセル',
function(cancel){
if (cancel) return;
/*------------
 処理を書く
 ------------*/
});