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

  関連記事

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

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

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

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

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

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

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

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

no image
Polymer core-ajax の使い方

Polymerのcore-ajaxの使い方。 まずは、index.html [code language=”html” title=”index.html”] <!doctype html> <html> <head&gt …

Selenium × PHP でテスト自動化!【環境構築編】

はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 テスト自動化の背景 わたくしが担当するXmediaOneでは品質担保のために①コードベ …

プログラミング初心者がswiftでゲームアプリ的なものを作ってみた。

こんにちは、DAC2年目のkumataです。 普段は素敵な先輩方に囲まれてインフラ周りのお仕事をさせて頂いていますが、 今回は業務とは全く関係ないプログラミングをやってみました。 全く初心者なのですが、swift+Xcodeで簡単にスマホゲーム的なものが作れました。 初心者の目線から作成方法をつらつ …

no image
Angular.jsのvalueとfactoryの違いを考える

次のようなHTMLがあったとする。 [code language=”html”] <!doctype html> <html lang="jp" ng-app="App"> <head> <me …

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

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

【未経験からのRuby on Rails – 第4回】Railsアプリケーション開発をしよう! 〜開発の準備編〜

こんにちは。新卒のmatsuariです。 Rubyについてまだまだ知るべきことはたくさんありますが、とにかく早くアプリを作りたい! ということで、今回はアプリ開発の準備に取り掛かっていきます。 Rubyはアプリを作成しながら、同時に学んでいきたいと思います。 Railsアプリケーション開発の準備《 …