ポータルサイトにも使える小技を紹介！Bootstapのモーダル機能を拡大画像の表示として利用する

これまでも何回か紹介させていただいているBootstrapですが、ポップアップの代わりとなる「モーダル」という機能が基本的に備わっています。
通常は注訳など文章を表示させるために利用しますが、ちょっと工夫すれば拡大画像の表示に利用できます。

Bootstrapのモーダルでは「タイトル（ヘッダー）」「本文（ボディー）」「クローズ等のボタン（フッター）」を基本的に表示できます。
利用規約などちょっとした文章を掲載する時に重宝します。

※モーダルの細かい設定は下記をご参考ください
〇Bootstrap Modal
https://getbootstrap.com/docs/4.3/components/modal/

さてこのモーダルを画像表示に利用するのですが、そのまま画像だけを表示すると下記のようになります。

上記のような形でも問題ないといえばそうなのですが、もう少し工夫したいところです。
そこでいらない要素を省き、必要な要素のデザインを整えてみたいと思います。

まずタグを確認しましょう。

<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="modal1Label" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
-------------------------------------------------------------------------------------------------------------
※ヘッダー部分
      <div class="modal-header">
        <h5 class="modal-title" id="modal1Label">画像拡大</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
-------------------------------------------------------------------------------------------------------------
※画像部分（ボディー）
      <div class="modal-body">
        <img src="/wp/wp-content/uploads/2019/03/20190307.png" class="w-100">
      </div>
-------------------------------------------------------------------------------------------------------------
※フッター部分
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じるボタン</button>
        <button type="button" class="btn btn-primary">任意のボタン</button>
      </div>
-------------------------------------------------------------------------------------------------------------
    </div>
  </div>
</div>

ヘッダー部分のタイトルは省けそうですね。×（閉じるボタン）は残しておきます。
ヘッダー部分の閉じるボタンを残すのでフッター部分は必要なくなるので削除します。
画像部分は余白が気になるので調整します。

だいぶすっきりした感じになりました。
さらに見た目をCSSなどで調整してみましょう。

まだまだ改良の余地はありますが、モーダルは上記の感じで問題ないでしょう。
あとは画像がクリックされるとモーダルが展開されるように設定して終了です。

上記の設定のコードは下記になります。
Bootstrapをお使いの際は参考にしてみてください。

〇html

▼リンク画像
<a href="" data-toggle="modal" data-target="#modal3" class="d-block""><img src="/wp/wp-content/uploads/2019/03/20190307.png" class="w-100""></a">
▼モーダル
<div class="modal fade" id="modal3" tabindex="-1" role="dialog" aria-labelledby="modal3Label" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content modal-custum">
        <button type="button" class="modal-btn" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span> Close
        </button>
      <div class="modal-body p-0">
        <img src="/wp/wp-content/uploads/2019/03/20190307.png" class="w-100">
      </div>
    </div>
  </div>
</div>

〇CSSl

.modal-custum{
  position: relative;
}
.modal-btn{
  position: absolute;
  top: 0;
  right: 0;
  background: #000;
  color:#fff;
  z-index: 10;
  border: 0;
}

今回はBootstrapの基本的な機能「モーダル」をカスタマイズして利用する方法を紹介しました。
工夫次第でより機能的なものになると思いますので、一度お試しいただければと思います。