Bootstrapを使ってみる。モーダルウィンドウ編(Modal)


Bootstrapを使ってみよう。モーダルウィンドウ編(Modal)



Bootstrapで用意されている、JavaScriptを使ったコンポーネント「Modal(モーダル)」を利用してみよう。
「Modal(モーダル)」は入力ボックスやLightboxのように画像を浮き上がらせて表示することが出来る。
今回はBootstrap公式で案内されている標準的な使い方とLightboxのように画像を表示させてみたい。

Bootstrap

*この記事はHTML・CSSの基本知識がある前提での備忘録のため説明に至らない部分があります、あしからず。

Modal(モーダル)の使い方

Modalの利用にはまずBoostrap公式のModalsからLivedemoのコードを使って表示してみよう。

まずはモーダルウィンドウを表示するボタンの設置。

<!– Button trigger modal –>
<button type=”button” class=”btn btn-primary btn-lg” data-toggle=”modal” data-target=”#myModal“>
Launch demo modal
</button>

続いてモーダルウィンドウ部分のコードを設置。

ボタン側の[ data-target=”#myModal” ] と モーダルウィンドウの [ div id ]を合わせる。

<!– モーダルウィンドウ –>
<div class=”modal fade” id=”myModal” tabindex=”-1″ role=”dialog” aria-labelledby=”myModalLabel”>
<div class=”modal-dialog” role=”document”>
<div class=”modal-content”>
<div class=”modal-header”>
<button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”><span aria-hidden=”true”>&times;</span></button>
<h4 class=”modal-title” id=”myModalLabel”>Modal title</h4>
</div>
<div class=”modal-body”>

</div>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-default” data-dismiss=”modal”>Close</button>
<button type=”button” class=”btn btn-primary”>Save changes</button>
</div>
</div>
</div>
</div>
  • モーダルには「ヘッダー」「ボディ」「フッター」がある。
  • ボディ部分にはグリッドシステムも使える。
  • モーダル表示の際のアニメーションを無効にするにはクラス「fade」を削除。

Modal(モーダル)を使って画像を表示する。

続いてはモーダルを利用してLightboxのように画像を表示してみる。

  1. モーダルウィンドウを出す画像を配置。
  2. 表示されるモーダルウィンドウの設置。

ヘッダー部分やフッター部分を排除しています。

BootstrapのCSSにヘッダー部に下線が入っていたり、閉じるボタンとの兼ね合いです。

まずはシンプルな状態にしてから装飾したいと思います。

<!– モーダルウィンドウを表示する画像を設置 –>
<img src=”img/image0.jpg” alt=”モーダル商品イメージ1” data-toggle=”modal” data-target=”#image_myModal”>
<!– 表示される画像のモーダルウィンドウ –>
<div class=”modal fade” id=”image_myModal”>
<div class=”modal-dialog”>
<div class=”modal-body”>
<img src=”img/image.jpg” alt=”モーダル商品イメージ1”>
</div>
</div>
</div>

なにも装飾せず、不必要な部分を取った所までの確認はコチラ

Modalの使い方


イメージ画像をモーダルウィンドウに出すことは出来たが、味気ないので装飾してみる。

変更点は以下

  1. モーダルウィンドウの縦表示位置を少し調整する。
  2. モーダルウィンドウにテキストを表示して中央揃えにする。
  3. モーダルウィンドウの画像がレスポンシブ対応ではないのでレスポンシブ化する。
  4. モーダルウィンドウ表示時に閉じるボタンがないので付ける。
  5. サイトの画像にマウスを重ねてもポインターの形状が変わらずリンクであることがわかり辛い。ついでにサムネイルしたい。

まずは出来上がったコード。

CSS

<style>
/* modal表示時の縦位置 */
.modalcenter{
  padding:10% 0;
}
/* modalフッターのテキスト位置 */
.modal-img_footer {
  padding: 10px;
  text-align: center;
}
</style>

HTML

<!– モーダルウィンドウを表示するイメージ画像を設置 –>
<img src=”img/image0.jpg” class=”img-responsive thumbnail” alt=”モーダル商品イメージ1” data-toggle=”modal” data-target=”#image_myModal” style=”cursor:pointer”>

<!– 表示されるモーダルウィンドウ –>
<div class=”modal fade” id=”image_myModal”>

<div class=”modal-dialog modalcenter”>
<div class=”modal-content”>
<div class=”modal-body”>
<img src=”img/image.jpg” class=”img-responsive” alt=”モーダル商品イメージ1”>
</div>
<div class=”modal-img_footer”>
<p>商品1「夏のイメージ写真」</p>
<button type=”button” class=”btn btn-default” data-dismiss=”modal”>Close</button>
</div>
</div>
</div>
</div>

解説

  1. モーダルウィンドウ縦位置については、クラス名「modalcenter」を付けて、Style.cssで装飾。
  2. モーダルウィンドウフッターのテキストを中央揃えについても、クラス名「modal-img_footer」を付けて、Style.cssで装飾。
  3. モーダルウィンドウの画像のレスポンシブ化については、Bootstrapのクラス名「img-responsive」を付ける。
  4. モーダルウィンドウフッター部に、「Close」というBootstrapのボタンを追記。
  5. モーダルさせる画像のポインター問題については、イメージに「style=”cursor:pointer”」を追記。

少しはまりましたがなんとか形になったかなと・・・
注意点としてはモーダルのサイズが600pxだったので画像を合わせました。
それ以下それ以上のサイズだとさらに調整が必要かもしれません。

最終的に装飾したModalウィンドウはこちらを確認

Bootstrap-Modalを使ってみる。

ちなみに便利なプラグインはコチラにあります。
bootstrap-lightbox


以上です。


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

  1. […] ンポーネントをドラッグアンドドロップしていくだけでサイトが作れるというサービス・・・らしいのです。 [紹介元] Bootstrapを使ってみる。モーダルウィンドウ編(Modal) | みずかず […]

トラックバック URL