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

  関連記事

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

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

Scala実践「Either型を使ってimmutable(不変)なコードを書こう!」

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 Scalaでイケてるコードを書きたい! 背景 わたくしはDACに入社してからScala …

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

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

no image
gulp.jsで広告タグの開発環境を整える

SEOの観点から、サイト表示速度の高速化のためJavaScriptファイルから不用な空白や改行、 コメントを除去したりやローカル変数名を短縮するminifyが奨励されていますが、 これはタスクランナーのgulp.jsとプラグインを使って自動化する事が可能です。 ※gulpの基本的な使い方については下 …

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

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

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

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

ECMAScript6を使ってみた ~「Promise」編

ECMAScript6とは 一応ちょっとだけ説明しておくと、 ECMAScript(エクマスクリプト)は、Ecma Internationalによって標準化されたスクリプト言語で、バージョン6が2015 年 6 月 17 日に標準仕様として発行されました。(以下、ES6と呼びます) ES6ではcon …

Android 非同期処理についてまとめてみた

Androidには、UIに影響を与えないよういくつか非同期処理が用意されています。 今回は非同期処理の代表的な ・Service ・IntentService ・HandlerThread について違いを踏まえながらまとめます! 非同期処理について(http://codezine.jp/articl …

PyStanによるはじめてのマルコフ連鎖モンテカルロ法

はじめに こんにちは。システム開発部の中村です。 社内で行っている『データ解析のための統計モデリング入門』(所謂緑本)の輪読会に参加した所、 大変わかりやすい本だったものの、Macユーザには悲しい事に実装サンプルがWinBUGSだったため、 9章の一般化線形モデルのベイズ推定によるアプローチをPyt …

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

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