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;とかしておくとよりら

[hashimoya]

pointer-eventsか…

[yo-11-06]

ちょうど今モーダルウィンドウを探してたトコだった

[xxxYukihiroxxx]

Lightboxのウィンドウのこと。

[teppeis]

pointer-events, :target

[warriorking]

CSSでモーダル・ウィンドウ - Weblog - http://t.co/wsHWcFUj

[wasai]

あとで読む

[d4-1977]

ふえ〜

[bleu-bleut]

ライブラリ：：モーダル CSSのみでモーダル

[site159]

おもしろいな('A`)

[mattn]

いいね。こんど使う。

[kkeisuke]

:target pointer-events position fixed

[hiro_y]

pointer-events属性を使ってモーダルウィンドウぽく