Bootstrap

Bootstrapでトースト通知（Toasts）（通知バナー）を作る方法

2022年7月23日 by single コメントはまだありません

Bootstrapでトースト通知（Toasts）（通知バナー）を作る方法

デモ

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>Bootstrap Toasts demo</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
   <!-- アイコンのCDN -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
  <!-- JSファイル読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div><h4>サンプル１（ベーシック）</h4></div>
      <div style="background-color:grey;padding:10px;height:125px">
        <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" >
          <div class="toast-header">
            <svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false">
              <rect width="100%" height="100%" fill="#007aff"/>
            </svg>
            <strong class="me-auto">サンプル１</strong>
            <small>11 分前</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
          </div>
          <div class="toast-body">
            トースト通知メッセージ（ベーシック）
          </div>
        </div>
      </div>
      <script type="text/javascript">
        var option = {autohide: false};
        var toastElList = [].slice.call(document.querySelectorAll(".toast"));
        var toastList = toastElList.map(function (toastEl) {
          return new bootstrap.Toast(toastEl, option);
        });
        /* トースト表示 */
        toastList[0].show();
      </script>
    </div><!-- row -->

    <div class="row">
      <div><h4>サンプル２（ライブ）</h4></div>
      <div>
        <button type="button" class="btn btn-primary" id="liveToastBtn" onclick="showToast2();">
          トースト表示
        </button>
        <button type="button" class="btn btn-primary" id="liveToastBtn" onclick="hideToast2();">
          トースト非表示
        </button>
        <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
          <div
            id="liveToast"
            class="toast hide"
            role="alert"
            aria-live="assertive"
            aria-atomic="true"
          >
            <div class="toast-header">
              <i class="bi bi-info-circle-fill" style="font-size:20px;margin-right:10px;color:blue;"></i>
              <strong class="me-auto">サンプル２</strong>
              <small>20 分前</small>
              <button
                type="button"
                class="btn-close"
                data-bs-dismiss="toast"
                aria-label="閉じる"
              ></button>
            </div>
            <div class="toast-body">トースト通知メッセージ（ライブ）</div>
          </div>
        </div>
      </div>
      <script type="text/javascript">
        var options2 = null;
        var exampleEl2 = document.getElementById('liveToast');
        var toast2 = new bootstrap.Toast(exampleEl2, options2);
        /* トースト表示 */
        showToast2();
        function showToast2() {
          toast2.show();
        }
        function hideToast2() {
          toast2.hide();
        }
      </script>
    </div><!-- row -->
    <div class="row">
      <div><h4>サンプル３（jQuery）</h4></div>
      <div>
        <button type="button" class="btn btn-primary" id="liveToastBtn" onclick="showToast3();">
          トースト表示
        </button>
        <button type="button" class="btn btn-primary" id="liveToastBtn" onclick="hideToast3();">
          トースト非表示
        </button>
      </div>
      <div  style="background-color:red;;padding:10px;height:125px">
        <div  class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="example3"  data-bs-delay="10000">
          <div class="toast-header">
            <i class="bi bi-check-circle-fill" style="font-size:20px;margin-right:10px;color:green;"></i>
            <strong class="me-auto">サンプル３</strong>
            <button type="button" class="btn-secondary btn-sm" data-bs-dismiss="toast" >閉じる</button>
          </div>
          <div class="toast-body">
            トースト通知メッセージ（jQuery）
          </div>
        </div>
      </div>
      <!-- jQueryを利用するのでjQueryを読み込む -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <script type="text/javascript">
        function showToast3() {
          $('#example3').toast('show');;
        }
        function hideToast3() {
          $('#example3').toast('hide');;
        }
      </script>
    </div><!-- row -->
    <div class="row">
      <div><a name="example4"></a><h4>サンプル４（配置）</h4></div>
      <div class="mb-3">
        <label for="selectToastPlacement">トースト配置位置を選択してください</label> 
        <select class="form-select mt-2" id="selectToastPlacement" onchange="onSelectToastPlacementChanged();">
          <option value="" selected>位置を選択してください...</option>
          <option value="top-0 start-0">上部左側</option>
          <option value="top-0 start-50 translate-middle-x">上部中央</option>
          <option value="top-0 end-0">上部右側</option>
          <option value="top-50 start-0 translate-middle-y">中部左側</option>
          <option value="top-50 start-50 translate-middle">中部中央</option>
          <option value="top-50 end-0 translate-middle-y">中部右側</option>
          <option value="bottom-0 start-0">下部左側</option>
          <option value="bottom-0 start-50 translate-middle-x">下部中央</option>
          <option value="bottom-0 end-0">下部右側</option>
        </select>
      </div>
      <div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
        <div class="toast-container position-absolute p-3 position-fixed" id="toastPlacement">
          <div class="toast"  id="example4" data-bs-autohide="false">
            <div class="toast-header">
              <i class="bi bi-exclamation-triangle-fill"  style="font-size:20px;margin-right:10px;color:#ffc107;"></i>
              <strong class="me-auto">サンプル４</strong>
              <small>11分前</small>
              <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
            </div>
            <div class="toast-body">
              トースト通知メッセージ（配置）
            </div>
          </div>
        </div>
      </div>
      <!-- jQueryを利用するのでjQueryを読み込む -->
      <script type="text/javascript">
        var position = '';
        function onSelectToastPlacementChanged() {
          if ( position != "" ) $('#toastPlacement').removeClass(position);
          $('#sampleHTML').html('');
           position = $('#selectToastPlacement').val();
          if ( position != "" )  $('#toastPlacement').addClass(position);
          if ( position != "" ) { 
            $('#sampleHTML').html(editHTML(position));
            showToast4(); 
          } else {
            hideToast4();
          }
        }
        function showToast4() {
          $('#example4').toast('show');
        }
        function hideToast4() {
          $('#example4').toast('hide');;
        }
        function editHTML(className) {
          var HtmlString = '';
          HtmlString = HtmlString + "&lt;div aria-live=&quot;polite&quot; aria-atomic=&quot;true&quot; class=&quot;bg-dark position-relative bd-example-toasts&quot;&gt;\n";
          HtmlString = HtmlString + "  &lt;div class=&quot;toast-container position-absolute p-3 position-fixed <strong><span style='font-size:18px'>#</span></strong>&quot;  id=&quot;toastPlacement&quot;&gt;\n";
          HtmlString = HtmlString + "    &lt;div class=&quot;toast&quot;  id=&quot;example4&quot; data-bs-autohide=&quot;false&quot;&gt;\n";
          HtmlString = HtmlString + "      &lt;div class=&quot;toast-header&quot;&gt;\n";
          HtmlString = HtmlString + "        ...\n";
          HtmlString = HtmlString + "      &lt;/div&gt;\n";
          HtmlString = HtmlString + "      &lt;div class=&quot;toast-body&quot;&gt;\n";
          HtmlString = HtmlString + "        ...\n";
          HtmlString = HtmlString + "      &lt;/div&gt;\n";
          HtmlString = HtmlString + "    &lt;/div&gt;\n";
          HtmlString = HtmlString + "  &lt;/div&gt;\n";
          HtmlString = HtmlString + "&lt;/div&gt;\n";
          HtmlString = HtmlString.replace("#",className);
          return HtmlString;
        }
      </script>
    </div><!-- row -->
    <div class="row">
      <div class="col-12"><div id="sampleHTML" style="white-space: pre;border: 1px solid;height:300px;"></div></div>
    </div>
    <div class="row">
      <div><a  name="example5"></a><h4>サンプル５（カラー）</h4></div>
      <div class="toast-container"><!-- 複数のトーストを縦に並べる -->
        <div class="toast align-items-center text-white bg-primary border-0 color" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="d-flex">
            <div class="toast-body">
              bg-primary
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
        </div>
        <div class="toast align-items-center text-white bg-secondary border-0 color" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="d-flex">
            <div class="toast-body">
              bg-secondary
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
        </div>
        <div class="toast align-items-center text-white bg-success border-0 color" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="d-flex">
            <div class="toast-body">
              bg-success
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
        </div>
        <div class="toast align-items-center text-white bg-info border-0 color" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="d-flex">
            <div class="toast-body">
              bg-info
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
        </div>
        <div class="toast align-items-center text-white bg-warning border-0 color" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="d-flex">
            <div class="toast-body">
              bg-warning
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
        </div>
        <div class="toast align-items-center text-white bg-danger border-0 color" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="d-flex">
            <div class="toast-body">
              bg-danger
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
        </div>
        <div class="toast align-items-center bg-light border-0 color" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="d-flex">
            <div class="toast-body">
              bg-light
            </div>
            <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
        </div>
        <div class="toast align-items-center text-white bg-dark border-0 color" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="d-flex">
            <div class="toast-body">
              bg-dark
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
        </div>
      </div>      <!-- toast-container -->
      <script type="text/javascript">
        var option5 = {autohide: false};
        var toastElList5 = [].slice.call(document.querySelectorAll(".color"));
        var toastList5 = toastElList5.map(function (toastEl5) {
          return new bootstrap.Toast(toastEl5, option5);
        });
        toastList5.forEach(showToast);
        function showToast(item, index, arr) {
         item.show();
       }
      </script>
    </div><!-- row -->
  </div><!-- container -->
  <div style="height:500px;"></div>
</body>
</html>

実装方法

Bootstrap導入

まず、BootstrapのCSSファイルとJSファイルを読み込みます。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

導入方法の詳細は、以下のページをご覧ください。

トースト領域生成

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="example1">
  ...
</div>

まずトースト領域としてDIV領域を生成し、classに「toast」を設定してください。

トースト初期化

次に生成したトースト領域をターゲットにtoastを初期化します。

Javascriptの場合
<script type="text/javascript">
  var options = null;
  var exampleEl = document.getElementById('example1');
  var toast = new bootstrap.Toast(exampleEl, options);
</script>

トースト領域のオブジェクトを取得、それに対してトーストを初期化してください。

トースト表示

最後にshow()メソッドを実行し、トーストを表示させます。

Javascriptの場合
<script type="text/javascript">
  var options = null;
  var exampleEl = document.getElementById('example1');
  var toast = new bootstrap.Toast(exampleEl, options);
  toast.show();
</script>
jQueryの場合
<script type="text/javascript">
  function showToast() {
    $('#example1').toast('show');;
  }
</script>

自動非表示を無効化

デフォルトではトーストは自動的に非表示になりますが、オプション「autohide」に『false』を指定すると、非表示が無効化され、ずっと表示されたままになります。

Javascriptの場合
<script type="text/javascript">
  var options = {autohide: false};
  var exampleEl = document.getElementById('example1');
  var toast = new bootstrap.Toast(exampleEl, options);
</script>
HTMLタグ属性の場合
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
  ...
</div>

閉じるボタン実装

トーストを閉じる場合には、ボタンやリンクなどを設置し、そのオブジェクトに属性「data-bs-dismiss」、その値に『toast』を設定してください。

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
<button type="button" class="btn-secondary btn-sm" data-bs-dismiss="toast" >閉じる</button>

複数トーストを縦に並べるには

複数のトーストを同時に表示させる場合、縦に並べたほうが見やすくなります。そのように表示させるには、両トーストを格納するDIV領域を作成し、class「toast-container」を設定してください。



<div class="toast-container">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    ...
  </div>

  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    ...
  </div>
</div>

トースト表示位置

<div class="toast-container position-absolute p-3 position-fixed bottom-0 end-0" style="z-index: 5">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="example1">
    ...
  </div>
</div>

トーストを画面右下に表示する場合のコードが上になります。

まず、表示位置固定としてclass「position-fixed」を指定してください。これを指定することで、画面の右下などに位置が移動されます。これがないと、コードを書いた位置にトーストが表示されることになります。

次にclass「bottom-0」を指定することで表示領域の０地点、つまり、一番下に表示されるます。

そして「end-0」というのは最終地点、つまり、領域の一番右に表示させるクラスになり、両クラスを指定することで、画面右下に表示される、ということになります。

トースト表示位置クラス一覧
左上top-0 start-0
上部中央top-0 start-50 translate-middle-x
右上top-0 end-0
左側中央top-50 start-0 translate-middle-y
中央top-50 start-50 translate-middle
右側中央top-50 end-0 translate-middle-y
左下bottom-0 start-0
下部中央bottom-0 start-50 translate-middle-x
右下bottom-0 end-0

カラースキーム

Bootstrapの color と backgroundを利用することで、トーストのカラーを変更することができます。


<div class="toast align-items-center text-white bg-primary border-0 color" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      bg-primary
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

「bg-primary」を使ったトーストのコードが上になります。

「bg-primary」を使うことで、背景が青いトーストとなります。

ただし、文字が黒いままだと読みづらいので文字を白くするために「text-white」クラスを同時に設定しています。

オプション

オプションはJavascriptで初期化する際に指定できると同時に、また、属性に、 『data-bs-(オプション名)=(値)』を設定することで指定できます。

animation

『true』を設定すると、トースト表示時、フェードの効果を付けて“じんわり”表示されるようになります。

デフォルトは『true』です。

autohide

『false』を設定すると、表示されたトーストが自動で非表示にはならず、ずっと表示された状態になります。

デフォルトは『true』で自動的に非表示になります。

delay

トーストの表示時間をミリ秒単位で指定できるオプションです。

デフォルトは『5000』（５秒）です。

ご参考

関連ページ