jquery ui の dialogでポップアップダイアログを表示する

jquery ui で、ダイアログを表示させてみた。
コードは以下の通り。
<button id="popup">ダイアログをポップアップさせる</button>
<div id="dialog">
<div style="text-align: left;">
先に進む場合はOKボタンを押してください。
</div>
<div style="text-align: left;">
進まない場合はキャンセルボタンを押してください。
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
  var d = $('#dialog');
  d.dialog({
    // 初回時にポップアップさせない
    autoOpen:false,
    // タイトル部分の文言
    title: 'タイトル部分',
    // ポップアップさせた時にポップアップウィンドウ以外の部分を無効にする
    modal:true,
    // 下部にボタンを表示する
    buttons:{
      "OK": function(){
        alert("OKです");
        $(this).dialog("close");
      },
      "キャンセル":function(){
        alert("キャンセルされました");
        $(this).dialog("close");
      }
    }
  });
  $('#popup').click(function(){
    d.dialog("open");
  });
});
</script>

実際に動かしてみた感想は、
  • ポップアップウィンドウの中身が中央寄せになるのが気にくわない
  • autoOpenはtrueがデフォルトだけど、falseの方がいい気がする
というちょっとしたこと。慣れれば大丈夫、かな。
動作サンプルは以下の通り。


先に進む場合はOKボタンを押してください。
進まない場合はキャンセルボタンを押してください。

人気の投稿