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で出来ること、出来ないこと

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

 

要点とコード

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

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

メディアクエリのミックスインは過去記事を参照。

 

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

平井圭太様

こんにちは。
モーダルウインドウのソースを使わせていただきました。
探し求めていたのとぴったりで、活用させていただいております。
ありがとうございます。

ひとつ、困ったことがあり、コメントさせていただきました。

モーダルウインドウを一度開く→下までスクロール→閉る→再び開いた時に、
下の方までスクロールした状態で開いてしまうのです。
(「×閉じる」のあたりですので、下の方)
ですので、本当は一番上から読んでほしいものが、途中からの表示になってしまいます。

知識が乏しく、どうしても解決できないので、もしよろしければ、お知恵をお借りできないでしょうか。

宜しくお願いいたします。

返信
KEITA HIRAI

ito様
平井です。
コメント頂きありがとうございました。

一度表示して下までスクロールして閉じる、そして再度表示させたときにスクロールを元に戻すというのは、Ajax等の非同期技術を利用しないと厳しいと思いますねぇ。

もしくは、モーダルを閉じたときにスクロールを上に戻すという、何かしらの独自コードを追加すればできるかもしれませんが、うーんすぐには思いつきません。
申し訳ないです。

ここで一度視点を変えてみるのはいかがでしょう?
サイト利用者にとって「モーダル表示を閉じたあと再度開いて、スクロールが上まで戻っている必要があるか」と。
一般的なWebサイト利用者は、そこまで必要としていません。

返信
ito

平井様

お返事ありがとうございます。
・・・なるほど。。そういう考えもあですね。

レイアウトも含めて、戻らなくても見やすいものを再考してみます。
ありがとうございました。

返信

コメントを投稿する

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