ちょっと変わったダイアログ的なものを表示する

IEとかで標準のダイアログ（JavaScriptのalert）が出てくるとイラッとする貴方向け

そんな人いるのか？っていう事ではあるんですが。

まあ、なんか標準のアラートが出てくると、妙にシステマチックな印象を与えかねないっていうと大袈裟だけど、アプリケーションのエラーメッセージって、結構ちゃんと読んでもらえなかったりするじゃないですか。読んで欲しいのに。
んでもって、ちゃんとエラーメッセージでこうしてくださいって書いてあるのに「エラーが出ました、どうしたら良いですかー？」なんて阿呆な事言われたりする事ってあるじゃないですか。

なので、ちょっと変わった感じのメッセージが出てきたら、読んでくれるんじゃないか、と。

何はともあれ、とりあえず動作確認してみる。

その1（シンプルに文字を表示するだけ）

その2（ダイアログ内にボタン付き。）

その3（モーダルにする（標準のalert同様、処理を他に移さない。））

その4（リサイズ無効（サイズ変更出来なくする））

その5（マウスドラッグでの移動を無効にする）

いやー、まことにシンプルなダイアログですね。
シンプルダイアログです。

ダイアログの中身はdivでセットしておくので、当然タグも有効になるわけですね。

よくあるダイアログの動作です。他のコントロールがロックされる感じです。ハードロックです。

画像も入れられるYO！

それはそうと、最近なんだか色々とアレらしい。
何がアレでアレがどうなってアレになっていくのかは分からないのだが・・・・・

わかりません

これらが良いかどうかは分かりませんが、ひとまず方法を。

jqueryと、jquery-uiを使います。

1.jqueryとjquery-ui関連のファイルを読み込む。

jquery-ui.css（とimagesフォルダも一緒に）と、jquery.js と、jquery-ui.js を適当な所に配置して読み込む。適当な所って言っても、ベッドの下とか雑誌が積んである間とかダイハード4とか書いてカムフラージュするなんていう方法では結構発見されてしまうので要注意。（なんのこと？）

2.ダイアログ用のdivを置いておく。

<div id="dialog">メッセージメッセージメッセージ</div>

みたいな感じで。

3.HTML読み込み時に、2番のdivに対してdialog設定をしておく。

こんな感じで。

上記はボタン付きのいたってシンプルな奴で、以下の値を設定可能。

modal	デフォルトはfalse。trueでモーダル。
resizable	デフォルトはtrue。falseでリサイズ不可
draggable	デフォルトはtrue。falseで移動不可

他にもあると思うけどこのくらいで十分かなぁ、と。

4.なんらかのイベントきっかけで、dialogをopenする。

$("#dialog").dialog("open");

こんな感じで。

2009/06/04

関連項目

雑多なもの

Ext.js

jquery

lightwindow,greybox

SyntaxHighlighter

特別企画「犯人はヤス」

サイト

OPEN SPACE様
様々な情報がありますが、javascript関連のリファレンスも充実しています。
JQUERY日本語リファレンス
jQueryに関するリファレンスサイト。見やすい！です。

どう考えてもおすすめ書籍

JavaScript 第5版
	David Flanagan 村上列オライリー・ジャパン 2007-08-14 売り上げランキング : 10413 おすすめ平均誤解を招く本言語としてのJavaScriptに一番踏み込んだ本 JavaScriptのバイブル本 Amazonで詳しく見る by G-Tools

JavaScript: The Good Parts
	Douglas Crockford Oreilly & Associates Inc 2008-05 売り上げランキング : 31572 Amazonで詳しく見る by G-Tools

▲一番上へ