jQueryUIでダイアログを表示する

jQueryUIでダイアログを表示する
1. 関連

jQueryUIでダイアログを表示する

jQueryUIでダイアログを表示します。

まずjqueryとjquery-ui.min.js、jquery-ui.cssをプリロードします。

<script src="http://code.jquery.com/jquery.js"></script>
<script src="../js/jquery-ui.min.js"></script>
<link type="text/css" href="../css/jquery-ui.css" rel="stylesheet" />

ダイアログにはいろいろなオプションがあります。

buttons	ボタン名と操作
title	ダイアログのタイトル
resizable	true or false（リサイズ可）
modal	true or false

<body>
<!-- コーディング部分 -->
<script type="text/javascript">
  $(function(){
    $("#dialog").dialog({
      autoOpen:false,
      width:400,
      height:400,
      modal:true,
      buttons:{
        "OK":function(){
          // 送信
          $("#testForm").submit();
        },
        "Cancel":function(){
          // ダイアログを非表示
          $("#dialog").dialog("close");
        }
      }
    });

    $("#dialog_button").click(function(){
      // ダイアログを表示
      $("#dialog").dialog("open");
    });
  });
  </script>
 
  <form name="testForm" id="testForm">
    <!-- ボタン表示 -->
    <input type="button" value="ダイアログ表示" id="dialog_button" />
    <!-- ダイアログ部分 -->
    <div id="dialog">
      <h5>ここがダイアログです。</h5>
      <p>
      ここにダイアログの内容が入ります。<br/>
      色も<span style="color:red;">このように</span>変更できます。<br/>
      </p>
    </div>
  </form>
</body>

ボタンをクリックすると、divで囲んだダイアログの内容を表示します。

ダイアログが表示されると、dialogで指定したオプションの幅や高さ、モーダルにするかどうか、ボタン名（上記ではOKとCancel）、そのボタンを押した時のコールバック関数でボタン押下時の挙動をコーディングします。

上記ではOK押下時、フォームをサブミットしています。

Cancel押下時、ダイアログを閉じています。

フォームのサブミットする前の確認ダイアログなどで使用すると便利です。

DEMO

jquery.uiの詳細はこちらをどうぞ。