jQuery UI - ダイアログ

ダイアログボックスでは、ユーザーにメッセージを表示する、入力を促す、などします。

簡単な一行程度の入力を促すのなら、 prompt でもいいでしょうが、複数のデータの入力を促すのに複数回の prompt をするのでは、 ユーザーに対してちょっと古くさいプログラムであるという印象を与えかねません。

jQuery によるダイアログの表示

次のボタンをクリックすると、ダイアログボックスを表示します。

OK ボタンをクリックした時に、そのクリックイベントを処理してダイアログを閉じています。

このダイアログボックスの作成手順を説明します。

まずはダイアログの中身を div として作成します。

<div id="dialogdemo1">
<p>Hello, jQuery UI Dialog!</p>
</div>

次にこの要素を dialog メソッドでダイアログにしますが、このときにオプションをいくつか渡しています。

$('#dialogdemo1').dialog({
  autoOpen: false,
  title: 'jQuery Dialog Demo',
  closeOnEscape: false,
  modal: true,
  buttons: {
    "OK": function(){
      $(this).dialog('close');
    }
  }
});

オプションの意味

autoOpen オプションを true にすると、ダイアログをデフォルトでオープンします。ここではボタンをクリックしたタイミングでオープン(表示)するつもりなので、 falseにしています。

title ではダイアログのタイトルを設定します。

closeOnEscape はダイアログボックスが表示されている時の Esc (エスケープキー) を押された時に、ダイアログを閉じるかどうか指定します。 false にすると Esc キーでダイアログを閉じません。

modal はダイアログがモーダル表示かどうかの指定です。すなわち、ダイアログが表示されている時に、その背面が利用可能かどうか指定することになります。

buttons にはダイアログに表示するボタンとそのボタンのクリック時に呼び出される関数オブジェクトを指定します。ここでは dialog を単に閉じています。

ダイアログを開く

$('#button1').click(function(){
  $('#dialogdemo1').dialog('open');
});

最後に、ボタンをクリックしたときにボタンを開くという点については、 dialog('open') を呼び出すのみです。