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エンジニア採用情報

  関連記事

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

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

ディープラーニングで「顔が似ているAKB48のメンバーを教えてくれるbot」を構築

概要 こんにちは、システム開発部の中村です。 今回は、Facebook Messenger APIを利用して、 画像をアップロードすると、似ているAKB48のメンバーを教えてくれるbotを実装しました。 尚、ディープラーニングやTensorFlowそのものの解説というより、 「エンジンとしてディープ …

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

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

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

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

Scala番外編「Boxに保存したファイルをBox APIを使ってダウンロードしよう!」

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

GoogleスプレッドシートからTreasureDataへデータを取り込む

AudienceOneの開発を担当しています。skryoです。 またまたTreasureDataネタですが、今回はGoogleスプレッドシートからGoogleAppsScriptを使ってTreasureDataへデータを取り込む手順を紹介したいと思います。 なぜ? Googleスプレッドシート上でマ …

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

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

【未経験からのRuby on Rails – 第2回】Rubyのプログラムを書いてみる(Mac)

こんにちは。新卒1年目のmatsuariです。 前回はRubyとは何か、簡単にご紹介をしましたが、 今回は実際にRubyファイルを作成して、プログラムを書いてみるところまでご紹介していけたらと思います。 Mac環境のプログラミング初心者向けです。 はじめに、Rubyのプログラムを書くためのファイルを …

全ファイルを検索
意外と知らないかも? Chrome DevTools の機能10選

みんな使っている Chrome DevTools。 Web開発やトラブルシューティングには必須ですが、便利な機能を知らないで使っている人がいたり、Web で使い方を調べても古い情報だったりすることがあるので、部内で Chrome DevTools についての勉強会を開催しました。 ここでは、その中か …

SDKってどうやって作ってるの?【Android編】

こんにちは。4度目の投稿です。 現在私はAndroidのSDKを開発しています。 javaにもAndroidにもSDKにも手を出したのは初めてなので、最初はそもそもSDKのイメージが湧かず、ふわふわした状態で始めました。 SDKと調べても「あるソフトウェアを開発するために必要なプログラムや文書などを …