HTML・CSSのみで実装するポップアップ・モーダルウィンドウのデザイン2選

ユーザーへの通知・補足・詳細な情報の表示など様々な用途に使われるポップアップ・モーダルウィンドウ。今回はそんなモーダルをコピペだけで取り入れることができるデザインスニペットをまとめました。JavaScriptを使わずHTML・CSSのみで実装しているものなのでカスタマイズのハードルも低めです。

ラジオボタンで作るモーダル

リンク風

リンク風

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

ボタン風

ボタン風

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する