Bootstrapのモーダル機能で多重表示する際に解決しなければならない2つの問題


はじめに

みなさんこんにちは、プロダクト開発本部の亀梨です。
普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う
統合プラットフォームの開発・保守を担当しています。

エンジニアの皆さん、デザインってどうしてます?

わたくしはプライベートでとあるWebサイト・Webシステムの開発を行っているのですが、
全体のデザイン・見栄えに関わる部分についてはサイトの性質上(あまり凝ったデザインを作る必要が無い)及びコストの都合上(実装時間の短縮化)、
Bootstrap3を使用してUIを実装しています。

Bootstrapを使うメリット

Bootstrapを使用すると、

  • 一定のデザイン品質を担保できる
  • モバイルファースト(レスポンシブデザインに対応しPC, タブレット, スマートフォンのマルチデバイス表示に対応)
  • 高速開発(デザインの実装を容易にすることでエンジニアは機能開発に多くの時間を確保することができる)

という利点があるため採用しています。

ただし、Bootstrapは打ち出の小槌ではない

上記の理由はあるものの、便利な半面、要求に対して全て答えてくれるというものではなく、
実装したいUIと微妙に仕様・挙動が違う箇所が出てきた場合は適宜調整が必要となります。
今回はわたくしがBootstrapを利用していて実際に遭遇した諸問題について紹介したいと思います。

登録画面をBootstrap3のモーダル機能で実装した時に遭遇した問題の話

Webサイト・システムでの問い合わせフォームや何らかの登録機能を実装する際、
多くの場合は入力画面→確認画面→登録完了画面というふうに複数の画面を遷移する必要があるかと思います。

こういった画面の場合、1ページごとに画面をサーバーにリクエストしてページを取得して表示する遷移をするのは時間がかかり不便なことから
現在はページ遷移を伴わずに、ページ上にウィンドウをオーバーレイ表示させる「モーダルウィンドウ」が主流となっているかと思います。

モーダルウィンドウの例はこちら

Bootstrapを用いるとこのモーダルウィンドウを簡単に実装することができるのですが、
先ほどのケースのように入力画面→確認画面…といったようにページ上に複数のモーダルウィンドウを重ねて表示する場合には
2つの問題が生じることがわかりました。

問題1. 背景(オーバーレイ)とモーダルウィンドウが順に重なってくれない

モーダルウィンドウは元のページとの間にオーバーレイと呼ばれる黒半透明の背景を表示しますが、
2つのモーダルを重ねるときは元のページ→オーバーレイ1→モーダル画面1→オーバーレイ2→モーダル画面2と表示してほしいのに
Bootstrap3のモーダルをそのまま実装すると、元のページ→オーバーレイ1→オーバーレイ2→モーダル画面1→モーダル画面2となってしまいます。

こちらを参照

そのため、JavaScriptでこのオーバーレイとモーダルが順に重なるよう調整して上げる必要があります。

オーバーレイとモーダルの重なりはCSSのz-index値によって設定されますが、
この値を上記のように各要素に順番に設定してあげることで解決します。

解決した画面はこちらを参照

はい、ということで1つ目解決です。

問題2. 確認モーダル閉じた際に入力モーダルがスクロール不可になる

次の問題は、入力モーダル画面→確認モーダル画面と遷移した後入力内容を修正するために確認モーダル画面を閉じて入力モーダル画面に戻ると
スクロールができない状態になってします。

こちらを参照

こちらは確認モーダル画面を閉じる際に、bodyに設定しているスクロールに必要なクラスを削除してしまうことが原因のため、
確認モーダル画面を閉じる際に再度クラスを付与して上げる必要があります。

解決した画面はこちらを参照

以上です。

ということで、現時点で見つかっている問題は以上で、それ以外は快適に使用しています。
日本語のリファレンスも充実していますので参照あれ。

Bootstrapは便利に使いながらも、カスタマイズしたい場合は適宜調整しながら開発を進めていければと思います。
それではまた~。


DACエンジニア採用情報

  関連記事

no image
Polymer on Rails

Web Componentsをご存知だろうか。これが普及すればWebの開発は画期的に変わるだろう。 説明すると長くなるので、LIGさんのにその辺はお任せして。(この記事読んでください。) 簡単に言えば、下記にあるような新たに提案されたブラウザ向けAPIの総称。 Custom Elements, 説明 …

(社内新卒・PHPビギナー向け)MacでPHP7開発環境を構築しよう!

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 えっ!?新卒のプログラミング研修はPHPで行われるって?!俺の得意言語やないか!! は …

ゼロからAngularでSPAを作ってみた(2) デプロイ・公開編

前回のおさらいと今回やること 前回(はじめてのアプリ編)では、Angular で簡単なチャットアプリを作るところまでやりました。ディレクトリ構成については説明できていなかったのですが、次のようになっています。(主なディレクトリとファイルのみ抜粋) + dist (ビルド・コンパイル後のファイルのディ …

iOS端末情報をTreasureDataに送るアプリをswiftで作ってみた。

はじめまして、2年目のOyamanです。 通常業務とは別のことになりますが、Swiftに触れる機会が少しあったので、スマホ関連の記事を書かせていただきます。 はじめに SwiftとTreasureDataのSDKを使って、 iOSの端末情報をTreasureDataへ送るアプリを作ってみます。 今回 …

ナイーブベイズで羽生さんと羽生くんを分類してみた

はじめに こんにちは。システム開発部の中村です。 機械学習についての理解を促進するため、 データから分類モデルを自動で構築する古典的な方法である、 ナイーブベイズ分類器を実装してみました。 最近はCloudVisionAPIなど専ら画像解析が流行っていますが、 自分のような初学者には敷居が高そうだっ …

初心者がRailsで開発 – deviseでユーザー認証設定 –

こんにちは、2年目のYukaです。 開発部所属でありながら実は、、 実際に自分で手を動かして開発する機会がなかなかありませんでした。。 しかしついに、、、 開発初心者がRailsでWebアプリの開発に挑戦します!! 今回のゴールは社内でも使用しているGoogleアカウントで簡単にログインができるよう …

読み方がわからない技術用語 2015

英語圏での読み方を基本的には参考にしています。英語圏でも複数の読み方をしているケースもあるようなので、あくまでも参考程度。2015と書きながら、古い言葉も混じってますが。 async – えーしんく Alt – おると ASUS – えいすーす bower &#8 …

Scala入門 準備編「開発環境構築」 – PHP使いからScala使いへ転身!

  はじめに みなさんこんにちは、今月入社しましたプロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 XmediaOneの開発で採用しているプログラム言語はS …

Railsたった14行でアドサーバーAPIができた話

こんにちは。駆け出しエンジニアの近江です。 最近Railsにハマっているので、私が2年間担当しているアドサーバの、簡易版をRailsで作ってみました。 広告やキャンペーンを登録する管理画面はある前提で、ここからたった14行追加するだけでアドサーバーのHTTP APIを作りたいと思います。ついでに配信 …

D3.jsとその活用事例について

D3.jsとは? D3とは「Data Driven Document」の略で、データに基づいてドキュメントを操作するための JavaScript ライブラリです。 ご存知の方も多いと思いますが、ちょっとだけD3.jsの基本的な使い方、そして弊社プラットフォームでの利用についてご紹介したいと思います。 …