jQuery・表示させたときにスクロールを固定する、シンプルなモーダルウィンドウを作りました [IE9一部未対応]

150819_001

2016/05/31
translateY() を追加した滑らかバージョンを作っておきました。
Android の謎バグが解決できないため、オーバーレイのフェードは無しです。

2016/05/30 モーダルウィンドウのスクロール表示可、Esc キー閉じるを実装しました。

シンプルなモーダルウィンドウは leanModal.js が有名で、たまに使わせてもらっています。しかし、余計なコードが多いのと、モーダルを表示させたときにスクロールを固定してくれないため、自分で作りました。

目次

検証済みブラウザとOS

  • IE 9~ ※CSS3 transition は IE9不可
  • Firefox
  • Google Chrome
  • Safari
  • Windows 7
  • OS X Yosemite
  • iOS 9
  • Android 5

 

このjQueryで出来ること、出来ないこと

description

出来ること
  • インラインHTMLの表示
  • 上下左右真ん中に配置する
  • モーダルウィンドウとオーバーレイのアニメーションは、全て CSS transition で制御
  • モーダルウィンドウを表示させたとき、ブラウザ標準のスクロールを固定
  • 閉じる挙動は、オーバーレイクリック、Closeボタンクリック、Escキーを押す、3つを用意
出来ないこと
  • 前へ / 次へ のギャラリー機能
  • モーダルウィンドウの表示をアニメーションではなく、シンプルなフェード表示にする
    → タッチデバイスでブラウザスクロールが出来なくなるバグが解決できないため

 

要点とコード

code

  • トリガーボタンのリンクに、表示するモーダルウィンドウの id を指定
  • モーダルウィンドウ用のHTMLコードを、/body 直前に配置して、ページロード時のチラつきを防止
  • opacity と z-index を指定したクラスを、jQueryで追加 / 削除する

ベンダープレフィックスがないけど大丈夫?
gulp で自動化しましょう。

メディアクエリのミックスインは過去記事をご参考ください。

 

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)
西畑一馬
KADOKAWA/アスキー・メディアワークス
売り上げランキング: 19,488

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは、一度だけクリックしてお待ちください。