モーダルウィンドウ

モーダル（基本）

  • HTML
  • CSS
  • JS

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

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

  1. display:none;ではアニメーションできないためopacity + visibilityで制御してフェードイン・アウトのアニメーションを可能にしています。

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

  • 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.

popover モーダル（HTMLのみ）

  • HTML

popover属性をつかった、htmlのみで動作するモーダルウィンドウです。

See the Pen モーダル（HTMLのみ） by 早稲田電子IT教育センター (@wit-it) on CodePen.

  1. HTML のみで動作するため、少し手間のかかる CSS や Javascript の設定が要りません。

popover モーダル（簡易アニメーション）

  • HTML
  • CSS

popover属性をつかった html のみで動作するモーダルウィンドウに、cssで装飾とアニメーションを追加しました。

See the Pen popover モーダル（簡易アニメーション） by 早稲田電子IT教育センター (@wit-it) on CodePen.

  1. id="popover_area" に今回は popover="manual" を設定しているため、モーダル表示外をクリックしても閉じません。
  2. CSSでモーダル表示時にフェードインアニメーションをさせるため、opacityを使っています。
  3. アニメーションの開始時の設定に、@starting-style をCSSネストで記述しています。