jQuery UI の Dialog プラグインのダイアログを、アニメーション動作で開閉させる。アニメーション動作の指定には、show オプションとhide オプションを使う。
show オプションとhide オプションに指定する値については、アニメーション開閉の種類と動作例（サンプル）へ。
実装例（サンプル）
「×」アイコンをクリックすると、アニメーション動作で閉じる。タイトルをドラッグしながら、ダイアログを移動できる。ダイアログのサイズを変更することもできる。
実装例（サンプル）の動作について
- 「ダイアログを開く」ボタンを押すと、ブラウザの中央に、ダイアログが、アニメーション動作で出現する。
- ダイアログ内の「×」アイコンをクリックすると、アニメーション動作で、ダイアログを閉じる。
- ダイアログ内のタイトルをドラッグしながら、ダイアログを移動できる。
- ダイアログのサイズを変更することもできる。
実装例（サンプル）のソースコード
読み込み
パスは、それぞれ、アップロードした場所を指定する。
まとめて読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script>
個別に読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="ui/jquery.ui.dialog.js"></script>
<script type="text/javascript" src="ui/jquery.effects.core.js"></script>
<script type="text/javascript" src="ui/jquery.effects.explode.js"></script>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="ui/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="ui/jquery.ui.dialog.js"></script>
<script type="text/javascript" src="ui/jquery.effects.core.js"></script>
<script type="text/javascript" src="ui/jquery.effects.explode.js"></script>
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-ui-dialog' ) . dialog( {
autoOpen: false,
show: 'explode',
hide: 'explode'
} );
jQuery( '#jquery-ui-dialog-opener' ) . click( function() {
jQuery( '#jquery-ui-dialog' ) . dialog( 'open' );
return false;
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-ui-dialog' ) . dialog( {
autoOpen: false,
show: 'explode',
hide: 'explode'
} );
jQuery( '#jquery-ui-dialog-opener' ) . click( function() {
jQuery( '#jquery-ui-dialog' ) . dialog( 'open' );
return false;
} );
} );
// -->
</script>
HTML
<div id="jquery-ui-dialog" title="ダイアログ">
<p>「×」アイコンをクリックすると、<font style="color: red;">アニメーション動作で</font>閉じる。タイトルをドラッグしながら、ダイアログを移動できる。ダイアログのサイズを変更することもできる。</p>
</div>
<button id="jquery-ui-dialog-opener">ダイアログを開く</button>
<p>「×」アイコンをクリックすると、<font style="color: red;">アニメーション動作で</font>閉じる。タイトルをドラッグしながら、ダイアログを移動できる。ダイアログのサイズを変更することもできる。</p>
</div>
<button id="jquery-ui-dialog-opener">ダイアログを開く</button>
アニメーション動作の種類と動作例（サンプル）
「ダイアログを開く」ボタンをクリックすると、ダイアログが、アニメーション動作しながら現れる。
show
show 及び hide の値に、show を指定。
show 及び hide の値に、show を指定。
clip
show 及び hide の値に、clip を指定。
show 及び hide の値に、clip を指定。
explode
show 及び hide の値に、explode を指定。
show 及び hide の値に、explode を指定。
blind
show 及び hide の値に、blind を指定。
show 及び hide の値に、blind を指定。
bounce
show 及び hide の値に、bounce を指定。
show 及び hide の値に、bounce を指定。
drop
show 及び hide の値に、drop を指定。
show 及び hide の値に、drop を指定。
fold
show 及び hide の値に、fold を指定。
show 及び hide の値に、fold を指定。
slide
show 及び hide の値に、slide を指定。
show 及び hide の値に、slide を指定。