ダイアログを動的に作成する

JavaScript Dojo Snippets

DojoのサンプルでHTML側にテンプレートを用意してダイアログを開く方法は説明されてるんだけど、テンプレートも含めてJavaScriptから動的にダイアログを作成する方法がよく分からなかったので調べてみた。

ダイアログ作成時のオプションに toggle:"fade" が入ってるとなぜかダイアログが表示されなくて小一時間はまった。

var dialog = dojo.widget.createWidget('dialog', {
  id: "new_dialog",
  bgcolor: "white",
  bgOpacity: "0.5"
});
dialog.domNode.innerHTML = "<button id='ok'>OK</button>";
document.body.appendChild(dialog.domNode);

var okButton = $('ok');
dialog.setCloseControl(okButton);
Event.observe(okButton, 'click', doSomethingFuncion);

dialog.show();