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

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

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

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)