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

CSSでフローティングウィンドウもどき

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

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

どもです。
この頃、なんとなく癒しが足りない餅。です。

今回は久しぶりにCSSの話。

HTMLにはフローティングウィンドウというものがあります。
ボタンをクリックすると画面にウィンドウが出てくる奴。条件としては、ポップアップブロックなどに適用されず、動かすことが可能なものだそうで。

で、それを作るということになったものの、設置箇所がデータベースのリスト中。
その数が動的というのが困ったもので、しかもデータベース化するのは僕ではなく。
これは、普通にJavasriptで設置・管理するのは厳しいかも?。

ただ、動かせないウィンドウならCSSだけで実現可能そうだったので、そっちでやってみました。

参考にしたサイト様はこちら

HTML側の記述はこちら。

<label class="floatwindow_la" for="floatwindow01"></label>
  <input class="floatwindow" id="floatwindow01" type="checkbox" />
<div class="floatwindow"><label for="floatwindow01">×</label> ウィンドウの中身を記入します。</div>

で、CSS側の記述はこちらです。

div.floatwindow, input.floatwindow{
	display:none;
	}
input[type="checkbox"]:checked + div.floatwindow {
	display:block;
	position:fixed;
	top:20%;
	right:20%;
	width:50%;
	height:50%;
	background:#fff;
	border:1px solid #ccc;
}

仕組みとしましては、チェックボックスにチェックが入っているときのみ、チェックボックスと隣接するdivがdispray:blockになるという単純なもの。

チェックボックスは不可視にし、ラベルをボタン風に作ります。
ウィンドウは移動不可なので、滅多に使わないposition:fixedで大きさ共々ウィンドウ中に固定します。

ウィンドウもどきでチェックボックスが隠れることがあるので、ウィンドウの方にもラベルをつけるのを忘れずに。

今まで隣接セレクタは使いどころがわかっていなかったのですが、ラジオボタンやチェックボックスなどと併用するとフォームに選択ボタンが設置できることがわかりました。

まだまだ、CSSに関しても学びが足りないなぁ、これは。

3/4追記

IE8以前で正常に動作しないバグが見つかりました。
display:noneにしたcheckboxのon/offを切り替えることができないようです。

この解決法としまして、checkboxのスタイルを、

    position:absolute;
    opacity:0;

に変更。
これで正常に表示されます。

とはいえTabキー連打で見つかってしまうので、できれば避けたいところ。
XP終了につき、もうこのバグについては考えないで良いかな?
なんて思ってます(笑)

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