CSS3のみでモーダルを作成

CSS3のみでモーダルを作成

JavaScriptを使わずにCSSだけでモーダルウィンドウを実装する簡単なサンプルコードを記述してます。

環境

  • OS windows10 64bit
  • chrome 86.0.4240.198

モーダルを作成

CSSの:target疑似クラスを使用して実装します。

サンプルコード

以下は実際に、モーダルウィンドウを実装したサンプルコードとなります。

ブラウザ上で表示した結果

Clickして確認