Lightboxやthickboxという名前を使ったほうがしっくりくるでしょうか。スライドショーやコンタクトフォームなどでよく見る、画像やリンクをクリックすると画面真ん中に浮かび上がる、ポップアップみたいな画面のことです。

ただ単に画面中央に表示するモーダルウインドウの実装方法はいくらでもネット上にあると思いますので、今回はちょっと動きのあるものを作ってみたいと思います。完成形のサンプルは、このポートフォリオサイトの左メニュー下にある「Contact」もしくはGunosyのフッターメニューにある「お問い合わせ」をクリックすると見ることができます。画面下からひょいっと出てきて、閉じるときはガタッと崩れる感じ。Bootstrapのmodalも上からスライドインしてくる動きがありますね。

では早速ソース。まずは、骨組みとなるCSSから。

コメントアウトしているCSSは、普通のモーダルウインドウではそのまま記述して大丈夫です。「動き」を作るにはJavaScriptで制御する必要があるため、コメントアウトしています。CSSのID名はflavors.meを参考にしました。

ここで重要なのが、 #DOMWindowOverlay にある、 overflow-x, overflow-y の設定です。よくネット上で見かけるモーダルウインドウは、ウインドウサイズが小さいとはみ出る部分がちぎれて見れない、という問題がありますが(Bootstrapもそう)、これに対処すべく、ウインドウサイズが小さいときはOverlay内でスクロールさせるという方法をとります。Facebookもそうしていますね。

では続いてjsのソース。(もちろん、)CoffeeScriptです。

やっていることは実は簡単で、流れとしては

  • htmlおよびDOMWindowOverlayをoverflow: hidden; にして、画面上でスクロールさせなくする。
  • DOMWindowを、position: fixed; を用いてウインドウの最下部にセットする。
  • jQueryのanimateで、画面内にスライドインさせる。

のようになっています。あとは座標計算とか、各状態に対応したCSSをきちんと記述してやるだけです。ソースでは $(@DOMWindow).html でそのまま表示される中身を書いてしまっていますが、ここにajaxで読み込んだコンテンツを埋め込むように書いてやれば、より多くの場面で使えますね。Gunosyのお問い合わせもajaxを使っています。

@hider イベントは、ESCキーや、「閉じる」をクリックしたときにモーダルウインドウが崩れる動きに対応しています。ここで#DOMWindowに .rotation を加えてやれば、予めCSSでセットした rotate(20deg) が適用され、より「崩れ落ちる」感じを出してやることができます。

本当は transition を設定して、回転しながら落ちていく動きを作りたかったのですが、これをやると、一回スライドアウトした後に、一瞬元の位置に戻るというバグ?が発生するためやめました。

今回書いたコードには、position: fixed; の使い方など、けっこう細かいところで重要なテクニックが詰まっていると思います。ぜひ活用してみてください。

2012/07/05 追記

動きのあるモーダルウインドウの実装 CSS3版」を書きました。こちらも参考にしてみてください。

  1. couunderbarz reblogged this from yusugomori
  2. yusugomori posted this
Me

Yusuke Sugomori / 巣籠 悠輔

Creative Technologist

Planner / Engineer / Designer

View Portfolio