2011-10-22

CSSでモーダル・ウィンドウ

pointer-eventsプロパティでnoneを指定すると最前面に置いた要素を無視して普通にページ操作が可能になります。なので、そういう風にしておいた要素をopacityプロパティで非表示にしておけば、普段は見えないけど特定の操作で最前面に飛び出すモーダル・ウィンドウとかも簡単に出来ます。pointer-eventsプロパティってこういう使い方するためにあるの？

Demo: Pure CSS Modal Window

.window {
  opacity: 0;
  pointer-events: none;
}

で、見えない・操作できないウィンドウが作れるので、:target擬似クラスで表示の切替を行えばOKです。

.window:target {
  opacity: 1;
  pointer-events: auto;
}

簡単！　デモのようにposition: fixed;とかしておくとよりらしいでしょう。

閉じるボタンとかは文字を無理やりねじ込む形でやりました。今のこのサイトのロゴも同じ手法で無理やり一文字にすり替えています(すぐ変わるかもですが)。

.window .close-button a {
  display: block;
  width: 48px;
  height: 48px;
  line-height: 48px;
  overflow: hidden;
  text-align: center;
}

.window .close-button a:before {
  display: block;
  content: "\2716";
}

まず普通に閉じるボタンのa要素のサイズを決めます。ここでは48px四方にしました。そしてoverflowプロパティでhiddenを指定し、48px四方からはみ出すものが隠れるようにします。あとは::before擬似要素で絵文字(\2716はHeavy Multiplication Xとかいう奴です)を流しこんで、displayプロパティをblockにすれば挿入した絵文字以外が見えなくなります。blockにしないと絵文字に続いて元々の文字列が表示されてしまうので気を付けましょう。

面倒だったのでウィンドウは固定サイズにしましたが、display: table-cell;等を使ったセンタリング方法を利用すれば、内容物に合わせたフレキシブルなサイズのウィンドウにも出来ると思います。