ど素人から毛を生やす。<延>

CSSだけでライトボックスを作る

Web > css 2014年4月9日(最終更新:3年前)

このページは2014.4.9に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。
やっぱりCMSよりCSSな餅。です。

とある古いサイトをipad等に対応させるため、Flashだった建物内マップをjsにする
という仕事がありました。
マップにはlightboxを設置するということだったので、積み込んでいざ稼動テスト…、
ここまでは良かったのですが、

・積んであるjQueryが古く、jsプラグインが積み込めない
・jQueryを更新すると既存のjsが動かなくなる
・そもそも積んであるjsプラグインが多すぎてどれがどれやらわからない

というカオスな状況になりました。

複数のjsを読み込む方法、なんてのも調べたらありましたが、何か間違えたのか失敗しまして。

もう面倒臭くなったので、ライトボックスもCSSで作ることにしました。

原理は、以前の記事(CSSでフローティングウィンドウもどき)と同じで、透明化したチェックボックスを使用し、隣接するラベルのスタイルを変更する、というものです。

jsのライトボックスはboxの外をクリックすると元に戻るのが一般的なので、ラベルをfixedで縦横100%固定してしまいましょう。

<input id="floatwindow01" type="checkbox" ><label for="floatwindow01"><img src="画像URL"><span>画像の説明文</span></label>
input[type="checkbox"]:checked + label {
    display:block;
    position:fixed;
    width:100%;
    height:100%;
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;
    background:rgba(255,255,255,0.5);
    z-index:999;
}
input[type="checkbox"]:checked + label img {
    display:block;
    position:relative;
    left:auto;
    top:10%;
    height:80%;
    width:auto;
    margin:0 auto;
    z-index:9999;
}
input[type="checkbox"]:checked + label span {
    display:block;
    position:absolute;
    width:100%;
    top:auto;
    left:0;
    bottom:0;
    border-radius:0;
    background:#608c10;
    color:#fff;
    z-index:9999;
    text-align:center;
}
input{
    position:absolute;
    opacity:0;
    }

システム的にはたったのこれだけ。
デザインはお好みでどうぞ。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (`・ω・´) 役に立った (0)
  • (・∀・) 参考になった (1)