Bootstrap3のModal(モーダル・ダイアログ)で、毎回異なるリモートのコンテンツを読み込むサンプルソース
一覧画面などで、リンクやボタンを押された場合に、モーダル画面で情報を表示するというニーズは結構あります。
自分で一から実装するとなると、結構大変だったりするので、既存の仕組みを利用するといいのですが、使い方に慣れていないと、少しの振る舞いを変更するのに、調べたりしないといけなかったりして、時間とっちゃうんですよね。。
なので、汎用的な仕組みを使えるようになっておくと便利です。
汎用的なモーダル画面の仕組みはいくつかありますが、私がいろいろと試行錯誤してたどり着いたのは、「BootstrapのModal」と「jQuery colorbox」の2つが使いやすいです。
(2018/11月現在)
この記事では、「BootstrapのModal」の使い方を、実践的に使うさまざまなTipsとともにご紹介します。
サンプルのソースは、なるべく汎用的に利用できるように記載していますので、使えるところはコピペで使ってください。
目次
BootstrapのModalの良いところ
colorboxを使うか、bootstrapのmodalを使うか、要は使いどころとか、案件の要件をどの程度満たすかだと思いますが、使ってみて、Bootstrapのmodalのいいところを述べたいと思います。
開くモーダル画面のデザインがしやすい。
colorboxは、モーダルの上下にタイトルやカスタムのボタンを作るのが難しいですが、Bootstrapの場合は比較的簡単に出来ます。
ただし、モーダルが開くときのエフェクトや振る舞いなどは、colorboxの方が細かい制御ができる印象があります。
ただ、BootstrapのModalでも、たいていのことはできるでしょう。
Bootstrapのmodalの組み込み方
はじめに、Bootstrap をダウンロードしてきます。
現在(2018/11月)は、ver4.1が最新版のようですが、今のところModalの使い方のサンプルなどがネット上に多いのはVer3なので、困ったときのためにも、Ver3.3.7を利用しました。
また、ネット上のいくつかのサンプルは、Bootstrapのデータ・バインドの仕組みを使っていて、簡単に記載できますが、どのIDとどの名称がつながっているのかが分かりにくく、動きを細かくカスタマイズしようとしたときに、手が止まってしまいがちなので、javascript(jQuery)を使って、制御するようなサンプルにしています。
なので、jQueryもダウンロードしておきます。
このサンプルでは、Ver3.3.1を利用しました。
用意はこの「Bootstrap 3」と「jQuery 3」だけなので、準備できたら、以下のソースを記載します。
親画面のソース
Parent Page to Open Modal Window %MINIFYHTMLa888410383285e44898bef364f4becae10%%MINIFYHTMLa888410383285e44898bef364f4becae11%Parent Page to Open Modal Window
%MINIFYHTMLa888410383285e44898bef364f4becae12% Launch Modal(C1)
Launch Modal(C2)