オーバーレイ

css

正式名称をなんていうのかよく分からないのですが、lightboxライブラリでよく使われている、背景をグレーにしてボタンとかリンクとか押せなくするアレのやり方がわかったのでメモ。
ピンと来ない人は以下参照。
http://test.thecodecentral.com/demos/lightbox/lightbox.html

position:absolute

タネはこれでした。すごい事をやってるんだと思ってたら仕組みは単純。

<body>
  <a href="http://d.hatena.ne.jp">はてなダイアリー</a><br>
  <button onclick="alert('hello!')">押してみて！</button><br>
  <input type="text">
</body>

こんなHTMLがあったとします。当然、リンクやボタンは押せるし、フィールドは入力が出来ます。このHTMLに以下のようなDIVを用意すると。。

<div style="width:200px; height:100px; background-color:#6F6F6F; opacity:0.5; position:absolute;"></div>

どうでしょう。今度はリンクやボタンは押せなくなり、フィールドへの入力が出来なくなりました。
position:absoluteなdivがあることで、ちょうど薄い板が覆いかぶさったようにな効果が得られるようです。板を半透明にしておけばうっすら下が見えるしいい感じ♪

※「opacity:0.5」という書き方はfirefoxで動作します。IEの場合は「filter:alpha(opacity=30)」と書きます。

要素の位置取得

もともとこれをやりたいと思ったきっかけは、ユーザーに編集権限がないんだけど、表示はしたい、という箇所に使えないか、ということ。ただしその場合、「position:absolute」だから「top」や「left」を指定しないとうまくいきません。どうやって位置情報を取得しようか、、、と悩んでいました。
でも！要素の「offsetTop」と「offsetLeft」属性から位置情報が取得できる事が分かりました。これを使えば「top」や「left」に正確な値を設定できます♪