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

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

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

Open Dialog

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)を表示するように設定しています。

3 件のコメント

  • すごく便利なので、利用させて頂きました。
    ページ内に複数設置する場合はどのように書き換えればよいのでしょうか?

  • コメントを残す

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