【Bootstrap】モーダルを使ってバナーを表示する方法

エンジニア@LIFEMAP

2024年2月16日 13:24

お久しぶりです。
本日は、Bootstrapのモーダルを使ったバナー表示方法について書いていきたいと思います。
簡単に実装できるので、よければお試しください。

Bootstrapの導入方法については、公式サイトのドキュメントをご確認ください。（バージョン古くてごめんなさい…）

事前準備

まず、開発する前に以下の内容を準備してください。

画像ファイル
遷移先URL

開発

HTML

HTMLに以下の内容を追加します。

<div class="modal fade p-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-centered p-modal__dialog" role="document">
    <div class="modal-content">
      <div class="modal-body p-modal__body">
        <button type="button" class="close p-modal__button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <a href="{遷移先URL}" target="_blank">
          <img src="{画像ファイルのパス}" alt="{画像ファイルの説明文}" height="{画像ファイルの縦サイズ}" width="{画像ファイルの横サイズ}" />
        </a>
      </div>
    </div>
  </div>
</div>

追加が完了したら、それぞれの項目を埋めていきます。

{遷移先URL}:
事前に用意した遷移先URLに置き換えてください。
{画像ファイルのパス}:
事前に用意した画像ファイルが置いているパスに置き換えてください。
HTMLファイルと同じ場所に置いている場合は "./画像ファイル名" でOKです。
{画像ファイルの説明文}:
画像ファイルの説明文に書き換えてください。
{画像ファイルの縦サイズ}:
画像ファイルの縦サイズに書き換えてください。
例: 450pxの場合、"450" と書く。
{画像ファイルの横サイズ}:
画像ファイルの横サイズに書き換えてください。
例: 450pxの場合、"450" と書く。

CSS

次にCSSを書きます。
そのままの状態では枠線や余白など不要な装飾がされている状態の為、以下の内容を追加してください。

.p-modal__dialog {
    max-width: 450px;
    padding-left: 10px;
    padding-right: 10px;
}

.p-modal__body {
    padding: 0;
}

.p-modal__button {
    background-color: black !important;
    color: white;
    padding: 10px !important;
    position: absolute;
    top: -35px;
    right: 0;
}

Javascript

最後にJavascirptに以下の内容を追加します。

/**
 * 画面読み込み後にモーダルを表示する
 * @return {void} モーダル表示が目的なので返り値なし
 */
$(window).on('load',function(){
  $('.p-modal').modal('show');
});

動作確認

HTMLファイルをブラウザで開くと、画像のように表示されると思います。

おわりに

Bootstrapを使えばモーダルが簡単に実装できます。
他にもいろいろな機能があるので、ぜひ試してみてください。

それでは、また次回！