Javascriptista

画面を暗くして、写真が浮かび上がるサイトを見かけます。今回は画面を暗くする方法のみを紹介します。
簡単に書くと画面いっぱいの黒いDIVテーブルを作成して半透明にしてオーバーレイしています。

DEMO
解説

---

<script type="text/javascript">
function fadeout(){
  //画面いっぱいに表示する要素を作成する
  var ds = document.createElement('div');
  ds.style.display = 'none';
  ds.style.backgroundColor = '#000000';
  ds.setAttribute('id','testId');
  ds.style.position='absolute';
  ds.style.width='100%';
  ds.style.left='0px';
  ds.style.top='0px';
  ds.style.height= document.documentElement.clientHeight +'px';
  //要素の透明度を設定する。(ブラウザ依存)
  var userAgent = window.navigator.userAgent.toLowerCase();
  //for I.E.
  if (userAgent.indexOf("msie") > -1) {
    ds.style.filter='alpha(opacity=50)';
  }
  //for Other Browsers
  else {
    ds.style.opacity=.5;
  }

  //BODYの最後尾に付け加えて表示させる。
  document.body.appendChild(ds);
  ds.style.display = 'block';

  //3秒後に解除する。
  setTimeout("fadeIn()", 3000);

}

function fadeIn(){
  var tarElement = (document.getElementById("testId"));
  tarElement.parentNode.removeChild(tarElement);
}

</script>

---

・fadeout
サンプルではボタン押されたときに実行しています。
まず、DIV要素を作成します。画面いっぱいに表示される黒色のセルのDIVテーブルです。スタイルシートで指定していることをJavascriptで実行しています。要素にＩＤ付与しているのはおまけです（ds.setAttribute('id','testId');）。後でこの要素を消しやすくするためです。
『ds.style.display = 'none';』は念のためです。作成途中でレンダリングを防ぐためです。
要素作成するとき、透明度指定しますが、ブラウザ依存します。I.E.の指定だけ異なるみたいです。
作成完了したら、BODY要素の最後尾にこのＤＩＶ要素をつけたして表示させます。
表示させたら、画面上位にＤＩＶテーブルが表示されるので、画面操作ができません。本来であればこのＤＩＶ要素に新たな画面操作を表示させるのが普通ですが、今回は手間なので、３秒後に自動的に解除する形にしました。fadIn関数を3秒後に実行します。

・fadeIn
fadeout関数の中で『３秒後に呼び出す』イベントとして登録しました。
ＤＩＶ作成ｊ時にＩＤ名『testId』をつけているので、これを使って要素を抽出します。削除するときは、親要素から削除しますので、親要素から削除する形となっています。

---