モーダルウィンドウ

モーダル（基本）

  • HTML
  • CSS
  • JS

ボタンをクリックするとモーダル（ポップアップ）が開き、閉じるボタンや背景（オーバーレイ）をクリックすると閉じる、というシンプルなモーダルウィンドウです。

See the Pen 【モーダルウィンドウ】シンプル by 早稲田電子IT教育センター (@wit-it) on CodePen.

  1. display:none;ではアニメーションできないためopacity + visibilityで制御してフェードイン・アウトのアニメーションを可能にしています。
  2. ここに手順などの説明テキストが入ります。ここに手順などの説明テキストが入ります。ここに手順などの説明テキストが入ります。ここに手順などの説明テキストが入ります。
  3. ここに手順などの説明テキストが入ります。ここに手順などの説明テキストが入ります。ここに手順などの説明テキストが入ります。ここに手順などの説明テキストが入ります。

フルスクリーン型モーダル

  • HTML
  • CSS
  • JS

ここに特徴テキストが入ります。ここに特徴テキストが入ります。ここに特徴テキストが入ります。ここに特徴テキストが入ります。ここに特徴テキストが入ります。ここに特徴テキストが入ります。ここに特徴テキストが入ります。

See the Pen 【モーダルウィンドウ】フルスクリーン by 早稲田電子IT教育センター (@wit-it) on CodePen.

ズームイン型（拡大アニメーション付き）

  • HTML
  • CSS
  • JS

ここに特徴テキストが入ります。ここに特徴テキストが入ります。ここに特徴テキストが入ります。ここに特徴テキストが入ります。ここに特徴テキストが入ります。ここに特徴テキストが入ります。ここに特徴テキストが入ります。

See the Pen Untitled by 早稲田電子IT教育センター (@wit-it) on CodePen.

複数

  • HTML
  • CSS
  • JS

ここに特徴テキストが入ります。ここに特徴テキストが入ります。ここに特徴テキストが入ります。ここに特徴テキストが入ります。ここに特徴テキストが入ります。ここに特徴テキストが入ります。ここに特徴テキストが入ります。

See the Pen 【モーダルウィンドウ】複数対応 by 早稲田電子IT教育センター (@wit-it) on CodePen.

アクセシビリティ対応

  • HTML
  • CSS
  • JS

キーボード操作、フォーカス移動、Escキー対応のアクセシビリティ（A11y）を考慮したモーダルウィンドウです。