- 2008-07-23 (水)
- 技術
jQueryで画面の中央に要素を表示する方法 レイヤーを表示する場合なんかに有効な方法ですが、画面の中央にダイアログやボックスを表示する場合 jQueryを使うとかなり簡単に書けました。
以下のコードはwindowオブジェクトをjQueryの引数に渡してwidthメソッドやheightメソッドで取得しています。
jQueryのwidthメソッド・heightメソッドを使う
#hogeというのは中央に表示したい要素のidになります。
animateでアニメーションさせるとちょっぴりかっこよくなりました。
Firefox3とIE7で確認しましたが、ちゃんと真ん中に来てました！
これは助かります。
ちなみに画面全体（スクロールする部分も含む）の幅や高さを取得したい場合は
とすると取得が可能です。
jQueryを使わずに自前でやってみる
クロスブラウザで泣きを見るパターンですが、画面の幅や高さを取得する方法は各ブラウザによってさまざまです。
なのでレイヤー関連を扱う場合には以下のように、クロスブラウザ対応で取得する必要があります。
う～ん、あんまり見やすいコードではないですが、jQueryを使えない縛りがある場合には
こんな感じで書く必要がありますね。
上記コードは
- Firefox1.5～3
- IE6.0
- IE7.0
- Netscape7.1
- Opera9
- Safari3.1
などなどに対応している感じです。
■関連リンク
ブラウザの表示領域のサイズを取得する方法。 - Enjoy*Study
を参考にさせていただきました。
どうもありがとうございます！
【関連する記事】
- キングボンビーがサイトを侵略する？jQuery Plugin - kingbonbi.js作りました
- jDropper.jsのブログパーツとBookmarklet
- jQueryのheight()やwidth()はOpera9.5に対応していない気がする
- Newer: ボクが入れているFirefoxアドオン12個
- Older: Syntaxhighlighterでコードにシンタックスハイライトを付ける
Comments:0
Trackback:0
- TrackBack URL for this entry
- http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1068
- Listed below are links to weblogs that reference
- jQueryで画面の中央に要素を表示する方法 from HouseTect, JavaScripter Blog
