Simple JQuery Modal Window Tutorial | Queness

jQueryを使って作るシンプルなモーダルダイアログ。
jQuery単体で、ライブラリを使わずにLightBoxのようなモーダルダイアログを実現する方法です。

JavaScript45行ぐらいで、これを実現できてしまっちゃっているところが、jQueryのシェアの要因かもしれません。

シンプルなモーダルダイアログ


なかなか凝ったログインダイアログ


貼り付けメモ風


仕組みとしては、グレー背景や、ダイアログ等、あらかじめ必要なHTMLエレメントとCSSは定義しておいて非表示にし、jQueryによってshow,hideしているというものです。

実際に使える有用なサンプルとしてではなく、よいjQueryの教材としても使えるかもしれませんね。

関連エントリ

• 便利なjQueryプラグインいろいろ
• ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集
• グラフ描画用のjQueryプラグイン集