jQueryを使って作るシンプルなモーダルダイアログ:phpspot開発日誌
Simple JQuery Modal Window Tutorial | Queness jQueryを使って作るシンプルなモーダルダイアログ。 jQuery単体で、ライブラリを使わずにLightBoxのようなモーダルダイアログを実現する方法です。 JavaScript45行ぐらいで、これを実現できてしまっちゃっているところが、jQueryのシェアの要因かもしれません。 シンプルなモーダルダイアログ なかなか凝ったログインダイアログ 貼り付けメモ風 仕組みとしては、グレー背景や、ダイアログ等、あらかじめ必要なHTMLエレメントとCSSは定義しておいて非表示にし、jQueryによってshow,hideしているというものです。 実際に使える有用なサンプルとしてではなく、よいjQueryの教材としても使えるかもしれませんね。 関連エントリ 便利なjQueryプラグインいろいろ ナビゲーションの
ASCII.jp：jQueryによるLightbox風モーダルウィンドウの作り方｜Web制作の現場で使えるjQuery UIデザイン入門
HTMLとCSSによる表現を考える 複数のサムネイル画像を並べておき、画像をクリックするとモーダルウィンドウで拡大画像を表示するWebページを作成します。はじめに、HTML／XHTML（以下、HTML）とCSSでどのようにモーダルウィンドウを表現するか、静的なページを作って考えてみましょう。 HTMLは、ul/li要素で並べたサムネイル画像の後に、「glayLayer」と「overLayer」というid属性をつけたdiv要素を配置します。glayLayerはページ全体に重ねる半透明のレイヤーを表示するための要素で、overLayerは子ウィンドウを表示するための要素です。子ウィンドウに表示したい要素（今回はimg要素）はoverLayer内に配置します。 ▼サンプル01（HTML部分） <h1>jQueryを利用したモーダルウィンドウの作成</h1> <ul> <li><a href="i
jqModal :: Minimalistic Modaling for jQuery
jqModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny, akin to a "Swiss Army Knife", and makes a great base as a general purpose windowing framework. Features; Designer Frieldly - Use *your* HTML+CSS for Layout and Styling Translator/i18n friendly - No hardcoded English strings Developer friendly - Extensible through callba
[JS]既存のLightbox系スクリプトの不満を解決したスクリプト -Lightbox_me
IE6にも対応した、DOMエレメントをLightboxのエフェクトで表示するjQueryのプラグインを紹介します。 Lightbox_me - Stupidly Simple Lightboxing Lightbox_meは他のLigtbox系スクリプトのソリューションにはない特徴をもっています。 DOMエレメントをLightbox化。 ウインドウのリサイズ時はオーバーレイもリサイズ。 ドキュメントがウインドウよりサイズが小さい場合はオーバーレイのサイズを変更。 全てのブラウザで固定配置（fixed）で表示。 ウインドウがモーダルボックスより小さい場合は固定配置（fixed）が自動的に絶対配置（absolute）に切り替え。これによりユーザーはスクロールが可能に。 そして、軽量でシンプル、という素晴らしい特徴も備えています。 対応ブラウザはIE6+, Fx2.5+, Safari, Chr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]クロスブラウザ対応、モーダルボックスの軽量スクリプト -SimpleModal
