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行きました。やっぱりあそこ音がいいよね。