jQuery UI

jQuery UIによる画面コンポーネント（１）
●ダイアログとなる要素を新たに追加して表示

jQuery UI設定

function dialogOpen() {
   var ex1=$('#ex1');
   if(ex1.length<1) {
     ex1=$('<div id="ex1">jQureyのダイアログ</div>')
               .appendTo('body').dialog();
   } else {
     ex1.dialog('open');
   }
}

CSS設定





実行例　右上の×のアイコンが表示されていない




  
jQueryによるダイアログ

  

    
    
  










html




<body class="flora">
  <h3>jQueryによるダイアログ</h3>
  <p>
    <button onclick="dialogOpen();">ダイアログを開く</button>
    <button onclick="$('#ex1').dialog('close');">ダイアログを閉じる</button>
  </p>
</body>