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

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

関連記事

[jQuery UI] ツールチップを実装する(Tooltip)

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

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

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

[jQuery UI] ドロップを実装する(Droppable)

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

[jQuery UI] タブを実装する(Tabs)

jQueryUIでタブを実装するサンプルです。 サンプルソース 例)2タブ目を初期表示したタブ画面を作成する [cray ...

[jQuery UI] オートコンプリートを実装する(Autocomplete)

jQueryUIのオートコンプリートを使ったサンプルです。 サンプルソース 例)ボタンを押すと使用中のjQueryUIの ...

スポンサーリンク