読者です 読者をやめる 読者になる 読者になる

てきとう

ワーワーゆうとります

jQueryでlightboxごっこしようぜ

のっちとホリエテナーの熱愛が発覚して頭がパーンてなりそうなので
z-indexをコニャコニャしてlightboxぽくしようぜ。

CSSはこんなのだ

.light{
    display: none;
    position: absolute;
    background:#FFF;
    border:#CCC 1px solid;
    width:335px;
    z-index: 101;
}
#overlay {
  position: fixed;
  background: #000;
  filter: alpha(opacity=25);
  -moz-opacity:0.25;
  opacity:0.25;
  z-index: 100;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
* html #overlay { /* ie6 hack */
  position: absolute;
  background: #000;
  filter: alpha(opacity=25);
  -moz-opacity:0.25;
  opacity:0.25;
  z-index: 100;
  height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

本当にIE6なんか滅びたらいいと思うんだ。

そしてjQueryの$(document).ready()あたりにこれをぶっこみの拓。天羽君は死んでなんかいない。のっちはホリエと付き合ってなんかいない。

#!
  if (typeof document.body.style.maxHeight === "undefined") {//IE 6
    $("body","html").css({height: "100%", width: "100%"});
    $("html").css("overflow","hidden");
    $("#overlay").show();
    $(".light").show().append('なかみ');
    $("#overlay").click(tb_remove);
  } else {
    if(document.getElementById("TB_overlay") === null){
    $(".light").show().append('なかみ');
    $("#overlay").click(tb_remove);
  }

//lightboxもどきを消す
function tb_remove() {
  $(".light").empty().hide();
  $("#overlay").remove();
}

でHTMLのうしろのほうにこんなやつをいれて

#!
<body>
〜中略〜
<div id="overlay"></div>
<div class="light">まえ</div>
</body>

関係ないですが昨日久しぶりに渋谷AX行きました。やっぱりあそこ音がいいよね。

広告を非表示にする