ポータルサイトにも使える小技を紹介!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の基本的な機能「モーダル」をカスタマイズして利用する方法を紹介しました。
工夫次第でより機能的なものになると思いますので、一度お試しいただければと思います。