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の詳細はこちらをどうぞ。

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

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA