JavaScriptで要素を中央に表示する
ネタに詰まったらこう言う話でお茶を濁そうかと思いました。
風邪ひくわ大雪だわで外出てないので特に書くことがなく。
ま～中央表示するだけならCSS単体でもできます。
ウィンドウのリサイズで表示位置を変えるように書くのめんどくさいっていうか長いっていうか動かないかも、
ってのがあるので、jQuery使って楽に書いてみました。
[js]
$(document).ready(function(){
$(‘body’).append(‘<div id="wrapper"></div>’);
$(‘#wrapper’).css(‘width’,$(document).width()).css(‘height’,$(document).height());
$(‘#dialog’).css(‘left’,($(window).width() – $(‘#dialog’).outerWidth()) / 2).css(‘top’,($(window).height() – $(‘#dialog’).outerHeight()) / 2);
$(window).on(‘resize’,function(){
$(‘#wrapper’).css(‘width’,$(document).width()).css(‘height’,$(document).height());
$(‘#dialog’).css(‘left’,($(window).width() – $(‘#dialog’).outerWidth()) / 2).css(‘top’,($(window).height() – $(‘#dialog’).outerHeight()) / 2);
});
});
[/js]
[css]
body
{
height:2000px;
width:1000px;
}
#dialog
{
width:400px;
height:200px;
border:1px solid #ccc;
position:fixed;
background-color:#fff;
z-index:100001;
}
#wrapper
{
position:absolute;
z-index:100000;
left:0;top:0;
background-color:rgba(0,0,0,0.80);
}
[/css]
[html]
<div id="dialog">
ダイアログ
</div>
[/html]
ポイントはwidth()とouterWidth()ですかね。
両方とも要素の幅を取得するわけですが、
ボーダーの幅と余白まで考慮するのがouterWidth()です。
ただしマージンは考慮しません。trueを指定すれば拾います。
中央に表示する#dialogは、
幅と高さはもちろんですが、ボーダーやなにからCSSで何を指定されるかわかりませんので、
このように指定しました。マージンに関してはfixedの時点で無効ってことで。
HTML5対応のブラウザなら問題ないかな、テストしてないけど。
IE系は怪しいですが、怪しい理由はfixedなので、
これを指定できるライブラリがありますのでそれと一緒に使えば大丈夫、なのかな？
スクロールイベントに関連付けるとカクカクしちゃうので、このくらいがいいんじゃないかなあと思います。
そろそろレガシーなブラウザは捨てましょう。
