jquery dialog uiでウィンドウを出す方法

jquery uiを使うことで簡単にウィンドウ内にウィンドウを表示することができます。
ポップアップウィンドウをブロック設定しているプラウザが多いので、非常に役立ちます。

名称として、モルダルウィンドウ、フローティングウィンドウとも言われたりします。

html

<p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>
<div id="dialog" >
<p>jquery UIを使うことで、モルダルウィンドウやフローティングウィンドウ
といった子ウィンドウが作ることができます。
ポップアップを拒否しているサイトが増えている今、重宝する技術です。</p>
</div>

スタイルシートははこちら　画像はこちら

jquery

<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript">
$(function(){
  $('#dialog').dialog({
    autoOpen: false,
    width: 600,
    title: 'Jquery uiを使ったDialog',
    modal:true,
    resizable:false,
    buttons: {
    "Ok": function() { 
    $(this).dialog("close"); 
    }, 
    "Cancel": function() { 
    $(this).dialog("close"); 
    } 
    }
  });
  $('#dialog_link').click(function(){
    $('#dialog').dialog('open');
    return false;
  });
});
</script>

1,2行目でgoogleからjqueryとjquery uiを読み込んでいます。

$('#dialog').dialog({

セレクタで#dialogを選んで、uiで使えるdialogの命令を使います。

dialogのプロパティ

autoOpenは自動的に開くかどうかを指定します。はじめから子ウィンドウを開いている場合はtrue,ボタンをクリックしたときに表示するときはfalse

width,heightは子ウィンドウの幅と高さを指定します。

titleは子ウィンドウのタイトルを指定します。

modalはfalseでページは変わらず、子ウィンドウが開きます。trueにするとページが半透明のシャドウがかかり、子ウィンドウを際立たせ小ウィンドウ以外はさわれなくなります。

buttons は子ウィンドウに表示させるボタンを指定します。
今回は、OKボタンを押すと子ウィンドウが閉じ、Cancelボタンを押しても子ウィンドウが閉じるようになっています。

resizableはtrueで子ウィンドウのサイズを変更できます。初期設定ではtrueです、falseで固定になります。

 $('#dialog_link').click(function(){

dialog_linkをクリックしたときに子ウィンドウ（dialog）を表示するように設定しています。