jQuery UI プラグイン

[jQuery UI] ダイアログを実装する(Dialog)

投稿日:

jQueryUIでダイアログを実装するサンプルです。

サンプルソース

例)jQuery UIを使ったダイアログのサンプル

実行サンプル

ボタンを押すとダイアログが表示されます。

オプション

Dialogのオプションには以下のようなものがあります。

【オプション】
オプション意味
autoOpenダイアログを自動表示するかどうか
 true:する false:しない
modalモーダルとするかどうか
 true:する false:しない
show表示時のアニメーションを指定 ※以下のような指定ができます。
 "blind", "bounce", "clip", "drop", "explode", "fade", "fold","highlight","puff","pulsate", "scale", "shake", "size", "slide"
hide閉じるときのアニメーションを指定 ※以下のような指定ができます。
 "blind", "bounce", "clip", "drop", "explode", "fade", "fold","highlight","puff","pulsate", "scale", "shake", "size", "slide"
titleタイトルを指定
 例)title:"タイトルです"
width幅を指定
 例)width:400
height高さを指定
 例)width:400
resizableダイアログのサイズを変更できるかどうか
 true:変更可(デフォルト) false:変更不可
closeOnEscape[ESC]キーで閉じれるかどうか
 true:可(デフォルト) false:不可
draggableダイアログをドラッグして移動できるかどうか
 true:移動可(デフォルト) false:移動不可
buttons表示するボタンと処理を指定 ※上記サンプル参照

解説


スポンサーリンク

スポンサーリンク

-jQuery UI, プラグイン

執筆者:


comment

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

関連記事

[Plugin] アニメーションでページトップに戻るボタンを実装する(jQuery Scroll to Top Control)

アニメーションでページトップに戻るボタンを実装するには、 「jQuery Scroll to Top Control」と ...

[jqGrid] 特定の列を非表示にする

特定の列を非表示にするサンプルです。 サンプルソース 例)「金額」列を非表示にする [crayon-5bcb0d661e ...

[jqGrid] 全選択チェックボックスを非表示にする

全選択チェックボックスを非表示にするサンプルです。 サンプルソース 例)全選択チェックボックスを非表示にする [cray ...

[jQuery UI] ドラッグを実装する(Draggable)

jQueryUIでドラッグを実装するサンプルです。 サンプルソース 例)jQuery UIを使ったドラッグのサンプル [ ...

[jqGrid] 指定したセルの値を書き換える

jqGridで指定したセルの値を書き換えるするサンプルです サンプルソース 例)2行目の金額列の値を99999に書き換え ...

スポンサーリンク